/* -----------------------
   FÉNIX v0 — base seria/elegante (CSS LIMPIO)
----------------------- */

:root{
  --bg:#0b0f14;          /* grafito azulado */
  --bg2:#0a121a;         /* variante */
  --ink:#e9eef6;
  --muted:rgba(233,238,246,.72);
  --line:rgba(233,238,246,.14);
  --card:rgba(255,255,255,.06);

  --wrap: 1080px;
  --radius: 18px;

  --header-h: 68px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body.fx{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--ink);
}

/* wrap */
.fx-wrap{
  width:min(var(--wrap), calc(100% - 100px));
  margin:0 auto;
}

/* -----------------------
   PRELOADER (falso)
----------------------- */
.fx-preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background: radial-gradient(1200px 600px at 50% 40%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, var(--bg2), var(--bg));
  display:grid;
  place-items:center;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.fx-preloader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.fx-preloader__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  transform: translateY(-8px);
}
.fx-preloader__logo{
  width:124px;
  height:auto;
  opacity:.95;
}
.fx-preloader__bar{
  width:86px; /* más corto que el logo */
  height:3px;
  background: rgba(255,255,255,.14);
  border-radius:999px;
  overflow:hidden;
}
.fx-preloader__fill{
  display:block;
  height:100%;
  width:0%;
  background: rgba(255,255,255,.88);
  border-radius:999px;
}

/* -----------------------
   HEADER (top vs scrolled)
----------------------- */
.fx-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:120;
  height: var(--header-h);
  display:flex;
  align-items:center;

  /* TOP: más oscuro y nítido */
  background: rgba(8,12,16,.82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.07);

  transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease;
}

.fx-header.is-scrolled{
  /* SCROLLED: más transparente + más blur */
  background: rgba(8,12,16,.46);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.06);
}

.fx-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top: 4px;
}

.fx-brand img{
  width:40px;
  height:auto;
  display:block;
  opacity:.92;
}

/* nav base */
.fx-nav{
  display:flex;
  align-items:center;
}

/* NAV DESKTOP: sin fondo, opacidad 0.7 -> 1, separadores */
.fx-nav--desktop{
  gap:0;
}

.fx-nav--desktop a{
  position:relative;
  text-decoration:none;
  text-transform:uppercase;

  font-size: 9.5px;
  letter-spacing: .18em;
  padding: 8px 10px;

  background: none;
  border: none;

  color: var(--ink);
  opacity: .7;

  transition: opacity 180ms ease;
}

.fx-nav--desktop a:hover{
  opacity: 1;
}

.fx-nav--desktop a + a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:1px;
  height:12px;
  background: rgba(233,238,246,.12);
}

/* right side */
.fx-header__right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* CTA: con fondo, SOLO opacidad 0.7 -> 1, sin saltito */
.fx-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 32px;
  padding: 0 10px;

  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;

  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);

  color: var(--ink);
  opacity: .7;

  transition: opacity 180ms ease;
}

.fx-cta:hover{
  opacity: 1;
}

/* burger (solo mobile) */
.fx-burger{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  cursor:pointer;
}
.fx-burger span{
  width:18px;
  height:2px;
  background: rgba(233,238,246,.9);
  border-radius:999px;
  display:block;
}

/* -----------------------
   MOBILE MENU (nuevo diseño premium)
----------------------- */

.fx-menu{
  position:fixed;
  inset:0;
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition: opacity 220ms ease;
}

.fx-menu.is-open{
  opacity:1;
  pointer-events:auto;
}

/* overlay sutil + blur “perfume” */
.fx-menu__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}

/* contenedor centrado 95% x 95% */
.fx-menu__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -48%) scale(.985);
  width: min(95vw, 520px);
  height: 95vh;

  display:flex;
  flex-direction:column;

  background: linear-gradient(180deg, rgba(10,14,18,.98), rgba(8,12,16,.98));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  padding: 18px 18px;
  opacity:0;
}

/* animación elegante: aparece y “asienta” */
.fx-menu.is-open .fx-menu__panel{
  animation: fxMenuIn 260ms ease forwards;
}

@keyframes fxMenuIn{
  from{ opacity:0; transform: translate(-50%, -46%) scale(.985); }
  to  { opacity:1; transform: translate(-50%, -50%) scale(1); }
}

/* Top (alto fijo) */
.fx-menu__top{
  height: 72px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;

  padding: 6px 4px 10px;
}

/* logo 60% de lo actual */
.fx-menu__logo{
  width: 44px;          /* antes ~74 -> aprox 60% */
  height:auto;
  opacity:.92;
  justify-self:start;
}

/* CTA centrado (bases activas) */
.fx-menu__top .fx-cta{
  justify-self:center;
  display:inline-flex;
}

/* close delicado */
.fx-menu__close{
  justify-self:end;
  width: 40px;
  height: 40px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);

  color: var(--ink);
  opacity: .7;
  cursor:pointer;

  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.fx-menu__close:hover{
  opacity: 1;
  transform: rotate(10deg);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

/* divisores “principales” (top/center y center/bottom) */
.fx-menu__divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 2px 0 10px;
}

/* Centro: navegación */
.fx-nav--mobile{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding: 0;
  gap: 0;
  margin: 0;
  flex: 1;
}

/* links: alineados a la izquierda, sin cajas */
.fx-nav--mobile a{
  text-decoration:none;
  text-transform:uppercase;

  font-size: 10px;
  letter-spacing: .16em;

  color: var(--ink);
  opacity: .7;

  padding: 14px 6px;
  background: none;
  border: none;

  transition: opacity 180ms ease;
}

.fx-nav--mobile a:hover{
  opacity: 1;
}

/* separadores internos del listado (distintos a los principales) */
.fx-nav--mobile a + a{
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Bottom (alto fijo) */
.fx-menu__bottom{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 4px 6px;
}

/* CTA WhatsApp sobria */
.fx-wsp{
  display:inline-flex;
  align-items:center;
  gap:10px;

  text-decoration:none;
  text-transform:uppercase;

  font-size: 10px;
  letter-spacing: .16em;

  color: var(--ink);
  opacity: .7;

  padding: 10px 12px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);

  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease;
}

.fx-wsp:hover{
  opacity: 1;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}

/* opcional: mini icono circular */
.fx-wsp__dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background: #ffffff;   /* verde WhatsApp */
  animation: fxPulse 1.8s ease-in-out infinite;
}

@keyframes fxPulse{
  0%   { opacity:.6; transform: scale(.9); }
  50%  { opacity:1; transform: scale(1); }
  100% { opacity:.6; transform: scale(.9); }
}
/* -----------------------
   SECTIONS / FLOW
----------------------- */
.fx-main{
  scroll-snap-type: y mandatory;
}

.fx-section{
  position:relative;
  min-height:100vh;
  height:100vh;
  scroll-snap-align: start;
  overflow:hidden;
  padding-top: var(--header-h);
}

/* fondo video/imagen */
.fx-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.fx-bg__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.02) contrast(1.04);
}
.fx-bg__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 28% 50%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(11,15,20,.30), rgba(11,15,20,.64));
}

/* secciones placeholder */
.fx-bg--static{
  background: radial-gradient(900px 520px at 30% 40%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, var(--bg2), var(--bg));
}

/* HERO */
.fx-hero{
  position:relative;
  z-index:2;
  height: calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
}
.fx-hero__content{
  max-width: 780px;
}
.fx-eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(233,238,246,.70);
  margin-bottom:12px;
}
.fx-title{
  margin:0 0 14px;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height:1.02;
  letter-spacing:-0.02em;
}
.fx-lead{
  margin:0 0 22px;
  color: rgba(233,238,246,.78);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 560px;
}

/* botones hero */
.fx-actions{
  display:flex;
  gap:12px;
  align-items:center;
}
/* HERO BOTONES MÁS FINOS */
.fx-btn{
  height: 36px;              /* antes 44px */
  padding: 0 14px;           /* antes 16px */
  font-size: 11.5px;         /* antes 13px */
  letter-spacing: .06em;     /* un poco más elegante */
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.fx-btn:hover{ transform: translateY(-1px); }

.fx-btn--primary{
  background: rgba(233,238,246,.92);
  color: rgba(11,15,20,.96);
  border-color: rgba(233,238,246,.62);
}
.fx-btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(233,238,246,.92);
}

/* scroll hint */
.fx-scrollhint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  width:26px;
  height:40px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  display:grid;
  place-items:center;
  z-index:3;
  opacity:.75;
}
.fx-scrollhint span{
  width:4px; height:8px;
  background: rgba(255,255,255,.78);
  border-radius:999px;
  animation: dot 1.2s ease-in-out infinite;
}
@keyframes dot{
  0%{ transform: translateY(-6px); opacity:.45; }
  50%{ transform: translateY(6px); opacity:1; }
  100%{ transform: translateY(-6px); opacity:.45; }
}

/* placeholders */
.fx-placeholder{
  position:relative;
  z-index:2;
  height: calc(100vh - var(--header-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.fx-placeholder h2{
  margin:0;
  font-size: 34px;
  letter-spacing:-0.01em;
}
.fx-placeholder p{
  margin:0;
  color: rgba(233,238,246,.70);
  max-width: 560px;
}

/* -----------------------
   RESPONSIVE (<900)
----------------------- */
@media (max-width: 900px){
  :root{ --header-h: 76px; }
  .fx-wrap{ width:min(var(--wrap), calc(100% - 30px)); }

  .fx-nav--desktop{ display:none; }
  .fx-cta{ display:none; }
  .fx-burger{ display:flex; }

  .fx-title{ letter-spacing:-0.03em; }
  .fx-actions{ flex-direction:column; align-items:stretch; width:min(420px, 100%); }
  .fx-btn{ width:100%; }
}

/* accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fx-scrollhint span{ animation:none; }
  .fx-btn:hover{ transform:none; }
}

/* =========================
   HERO — overlay + reveal
   ========================= */

.fx-bg__overlay--hero{
  /* overlay más “cinematográfico” para leer texto */
  background:
    radial-gradient(900px 520px at 28% 50%, rgba(0,0,0,.34), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.60) 100%),
    linear-gradient(180deg, rgba(11,15,20,.22), rgba(11,15,20,.68));
}

/* animación de entrada súper sutil */
.fx-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.fx-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* HERO: controlar ancho para forzar 2 líneas limpias */
.fx-hero__content{
  max-width: 760px; /* bloque general */
}

.fx-title{
  max-width: 18ch; /* esto es la clave: limita el ancho del título */
  font-size: clamp(34px, 3.6vw, 56px); /* un poco más contenido */
  line-height: 1.04;
}

/* =========================
   HERO: evitar 3 líneas en el H1
   ========================= */


/* 2) El título usa más ancho real y baja un toque el tamaño máximo */
#inicio .fx-title{
  max-width: 30ch;                      /* MÁS ancho (antes te lo estaba achicando) */
  font-size: clamp(32px, 3.2vw, 54px);  /* baja el techo para que no parta en 3 */
  line-height: 1.05;
  text-wrap: balance;                   /* reparte las líneas mejor (moderno) */
}

/* =========================
   SISTEMA TITULARES GLOBAL
   ========================= */

.fx-heading{
  max-width: 900px;
}

.fx-heading__title{
  font-size: clamp(36px, 3.8vw, 50px); /* techo real en 50px */
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 18px;
}

.fx-heading__lead{
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--muted);
  max-width: 720px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px){

  /* Subimos apenas el bloque principal */
  #inicio .fx-hero{
    align-items:center;
  }

  #inicio .fx-hero__content{
    transform: translateY(-15px);   /* sube textos */
  }

  /* Bajamos botones */
  #inicio .fx-actions{
    margin-top: 60px;               /* empuja hacia abajo */
  }

  /* Bajamos un punto tipografías superior e inferior */
  #inicio .fx-eyebrow{
    font-size: 10px;   /* si estaba en 12 */
  }

  #inicio .fx-heading__lead,
  #inicio .fx-lead{
    font-size: 12px;   /* si estaba en 17 */
  }
}

/* =========================
   SERVICIOS — Horizontal refinado
   ========================= */

#servicios .fx-services{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

#servicios .fx-services__row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px; /* menos separación general */
}

/* COPY */
#servicios .fx-services__copy{
  max-width: 860px;
}

#servicios .fx-services__title{
  max-width: 34ch;
}

#servicios .fx-services__lead{
  max-width: 58ch;
  margin-top: -4px;
}

/* =========================
   BLOQUES EN FILA
   ========================= */

#servicios .fx-services__blocks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; /* menos separación */
}

/* Bloques más compactos */
#servicios .fx-serviceBlock{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  border-radius: 16px;

  padding: 12px 12px 10px; /* reducido */
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  transition: opacity 180ms ease, border-color 180ms ease;
}

#servicios .fx-serviceBlock:hover{
  opacity: 1;
  border-color: rgba(255,255,255,.28);
}

/* Meta superior compacta */
#servicios .fx-serviceBlock__meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  opacity: .65;
}

#servicios .fx-serviceBlock__tag{
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  height: 24px;
  padding: 0 8px;
  display:inline-flex;
  align-items:center;
}

#servicios .fx-serviceBlock__sep{
  width: 1px;
  height: 12px;
  background: rgba(233,238,246,.14);
}

#servicios .fx-serviceBlock__mini{
  font-size: 10.5px;
  letter-spacing: .05em;
  color: rgba(233,238,246,.70);
}

#servicios .fx-serviceBlock__title{
  margin: 0 0 6px;
  font-size: 14px;
}

#servicios .fx-serviceBlock__text{
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(233,238,246,.70);
}



/* =========================
   CTA ABAJO DE TODO
   ========================= */

#servicios .fx-services__actions{
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

@media (max-width: 900px){

  /* --------- Layout: apilar --------- */
  #servicios .fx-services__blocks{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* --------- Tipos: igual que HERO --------- */
  #servicios .fx-eyebrow{ font-size: 10px; }

  #servicios .fx-services__title{
    font-size: clamp(26px, 6vw, 32px); /* mismo tope 32 */
    line-height: 1.06;
  }

  #servicios .fx-services__lead{
    font-size: 12px;
    line-height: 1.55;
  }

  /* Botones igual que hero (si ya están en 11.5, no hace falta) */
  #servicios .fx-services__actions .fx-btn{
    font-size: 11.5px;
  }

  /* --------- Limpieza: ocultar micro-labels --------- */
  #servicios .fx-serviceBlock__meta{
    display: none;
  }
}

/* =========================
   CÓMO — Desktop (emula Servicios)
   ========================= */

/* Overlay específico */
#como .fx-bg__overlay--como{
  background:
    radial-gradient(980px 560px at 30% 55%, rgba(0,0,0,.32), transparent 64%),
    linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.64) 100%),
    linear-gradient(180deg, rgba(11,15,20,.16), rgba(11,15,20,.78));
}

/* Contenedor vertical */
#como .fx-como{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

#como .fx-como__row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Copy */
#como .fx-como__copy{
  max-width: 860px;
}

#como .fx-como__title{
  max-width: 34ch;
}

#como .fx-como__lead{
  max-width: 58ch;
  margin-top: -4px;
}

/* Bloques en fila */
#como .fx-como__blocks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Step block (card compacta premium) */
#como .fx-stepBlock{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  border-radius: 16px;

  padding: 12px 12px 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);

  opacity: .85;
  transition: transform 200ms ease,
              border-color 200ms ease,
              background 200ms ease,
              box-shadow 200ms ease,
              opacity 200ms ease;
}

#como .fx-stepBlock:hover{
  opacity: 1;
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Title + text */
#como .fx-stepBlock__title{
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

#como .fx-stepBlock__text{
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(233,238,246,.72);
}

/* Meta abajo (micro labels) */
#como .fx-stepBlock__meta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .65;
}

#como .fx-stepBlock__mini{
  font-size: 10.5px;
  letter-spacing: .05em;
  color: rgba(233,238,246,.72);
  white-space: nowrap;
}

#como .fx-stepBlock__sep{
  width: 1px;
  height: 12px;
  background: rgba(233,238,246,.14);
}

/* CTAs abajo */
#como .fx-como__actions{
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

@media (max-width: 900px){

  /* Apilar bloques */
  #como .fx-como__blocks{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Tipografías iguales a HERO mobile */
  #como .fx-eyebrow{ font-size: 10px; }

  #como .fx-como__title{
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.06;
  }

  #como .fx-como__lead{
    font-size: 12px;
    line-height: 1.55;
  }

  /* CTAs igual que hero */
  #como .fx-como__actions .fx-btn{
    font-size: 11.5px;
  }

  /* Limpieza: ocultar micro labels */
  #como .fx-stepBlock__meta{
    display: none;
  }
}

/* =========================
   COBERTURA — Desktop
   ========================= */

#cobertura .fx-bg__overlay--cobertura{
  background:
    radial-gradient(980px 560px at 30% 55%, rgba(0,0,0,.32), transparent 64%),
    linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.64) 100%),
    linear-gradient(180deg, rgba(11,15,20,.18), rgba(11,15,20,.78));
}

#cobertura .fx-cobertura{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

#cobertura .fx-cobertura__row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#cobertura .fx-cobertura__copy{
  max-width: 860px;
}

#cobertura .fx-cobertura__title{
  max-width: 30ch;
}

#cobertura .fx-cobertura__lead{
  max-width: 58ch;
  margin-top: -4px;
}

#cobertura .fx-cobertura__actions{
  display: flex;
  gap: 12px;
}

@media (max-width: 900px){

  /* equivalente a #inicio .fx-hero align */
  #cobertura .fx-cobertura{
    height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
  }

  /* equivalente a #inicio .fx-hero__content { transform: translateY(-15px); } */
  #cobertura .fx-cobertura__copy{
    transform: translateY(-15px);
  }

  /* equivalente a #inicio .fx-actions { margin-top: 60px; } */
  #cobertura .fx-cobertura__actions{
    margin-top: 60px;
    flex-direction: column;
    align-items: stretch;
    width: min(420px, 100%);
    gap: 10px;
  }

  /* equivalente a #inicio .fx-eyebrow { font-size: 10px; } */
  #cobertura .fx-eyebrow{
    font-size: 10px;
  }

  /* equivalente a #inicio lead */
  #cobertura .fx-cobertura__lead{
    font-size: 12px;
    line-height: 1.55;
  }

  /* mantener misma escala de CTAs que hero */
  #cobertura .fx-cobertura__actions .fx-btn{
    font-size: 11.5px;
    width: 100%;
  }
}

/* =========================
   NOSOTROS — Desktop (emula Servicios/Cómo)
   ========================= */

#nosotros .fx-bg__overlay--nosotros{
  background:
    radial-gradient(980px 560px at 30% 55%, rgba(0,0,0,.32), transparent 64%),
    linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.64) 100%),
    linear-gradient(180deg, rgba(11,15,20,.16), rgba(11,15,20,.78));
}

#nosotros .fx-nosotros{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

#nosotros .fx-nosotros__row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

#nosotros .fx-nosotros__copy{ max-width: 860px; }
#nosotros .fx-nosotros__title{ max-width: 34ch; }
#nosotros .fx-nosotros__lead{ max-width: 58ch; margin-top: -4px; }

/* 3 bloques en fila */
#nosotros .fx-nosotros__blocks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* bloques tipo “card compacta” */
#nosotros .fx-statBlock{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  opacity: .90;
  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease;
}

#nosotros .fx-statBlock:hover{
  opacity: 1;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.055);
}

/* número grande */
#nosotros .fx-statBlock__big{
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

/* texto chico */
#nosotros .fx-statBlock__small{
  font-size: 10px;
  line-height: 1.35;
  color: rgba(233,238,246,.70);
}

/* 24/7 split: preparado para animación */
#nosotros .fx-statSplit{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

#nosotros .fx-statSplit__part,
#nosotros .fx-statSplit__slash{
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
}

#nosotros .fx-statBlock.is-in .fx-statSplit__part--a{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

#nosotros .fx-statBlock.is-in .fx-statSplit__slash{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease 120ms, transform 260ms ease 120ms;
}

#nosotros .fx-statBlock.is-in .fx-statSplit__part--b{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease 240ms, transform 260ms ease 240ms;
}

/* CTA abajo */
#nosotros .fx-nosotros__actions{
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

@media (max-width: 900px){

  #nosotros .fx-nosotros__blocks{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* tipografías igual que hero mobile */
  #nosotros .fx-eyebrow{ font-size: 10px; }

  #nosotros .fx-nosotros__title{
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.06;
  }

  #nosotros .fx-nosotros__lead{
    font-size: 12px;
    line-height: 1.55;
  }

  /* compactar número grande un toque */
  #nosotros .fx-statBlock__big{
    font-size: 30px;
  }

  /* CTA full width como hero */
  #nosotros .fx-nosotros__actions{
    flex-direction: column;
    align-items: stretch;
    width: min(420px, 100%);
  }

  #nosotros .fx-nosotros__actions .fx-btn{
    width: 100%;
    font-size: 11.5px;
  }
}

#nosotros .fx-statNum{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

#nosotros .fx-statBlock--split span{
  font-weight: 800;
}

/* =========================
   CONFIANZA — Desktop
   ========================= */

#confianza .fx-bg__overlay--confianza{
  background:
    radial-gradient(1000px 580px at 32% 52%, rgba(0,0,0,.30), transparent 65%),
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.20) 52%, rgba(0,0,0,.60) 100%),
    linear-gradient(180deg, rgba(11,15,20,.16), rgba(11,15,20,.78));
}

#confianza .fx-confianza{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

#confianza .fx-confianza__row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#confianza .fx-confianza__copy{
  max-width: 860px;
}

#confianza .fx-confianza__title{
  max-width: 32ch;
}

#confianza .fx-confianza__lead{
  max-width: 58ch;
  margin-top: -4px;
}

/* 4 bloques en fila */
#confianza .fx-confianza__blocks{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Bloque elegante minimal */
#confianza .fx-trustBlock{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  border-radius: 18px;

  padding: 20px 18px;
  transition: 
    transform 240ms ease,
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
}

#confianza .fx-trustBlock:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Número sutil arriba */
#confianza .fx-trustBlock__number{
  font-size: 11px;
  letter-spacing: .22em;
  opacity: .45;
  margin-bottom: 12px;
}

/* Título */
#confianza .fx-trustBlock__title{
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

/* Texto */
#confianza .fx-trustBlock__text{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(233,238,246,.70);
  margin: 0;
}

/* CTA abajo */
#confianza .fx-confianza__actions{
  margin-top: 8px;
}

@media (max-width: 900px){

  /* Composición como hero (aire + lectura) */
  #confianza .fx-eyebrow{ font-size: 10px; }

  #confianza .fx-confianza__title{
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.06;
  }

  #confianza .fx-confianza__lead{
    font-size: 12px;
    line-height: 1.55;
  }

  /* Rail horizontal premium (sin JS) */
  #confianza .fx-confianza__blocks{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 95%;
    gap: 12px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 2px 2px 8px;
  }

  /* esconder scrollbar (opcional, elegante) */
  #confianza .fx-confianza__blocks::-webkit-scrollbar{ height: 0; }

  #confianza .fx-trustBlock{
    scroll-snap-align: center;
    padding: 16px 14px;
    border-radius: 18px;
    transform: none; /* en mobile no levantamos */
  }

  /* números: sutiles, NO estorban */
  #confianza .fx-trustBlock__number{
    font-size: 10px;
    opacity: .35;
    margin-bottom: 10px;
  }

  #confianza .fx-trustBlock__title{
    font-size: 14px;
    margin-bottom: 8px;
  }

  #confianza .fx-trustBlock__text{
    font-size: 12px;
    line-height: 1.5;
  }

  /* CTA como hero */
  #confianza .fx-confianza__actions{
    margin-top: 16px;
    flex-direction: column;
    align-items: stretch;
    width: min(420px, 100%);
  }

  #confianza .fx-confianza__actions .fx-btn{
    width: 100%;
    font-size: 11.5px;
  }
}
/* =========================
   CONTACTO — Split + Footer premium
   ========================= */

#contacto .fx-bg__overlay--contacto{
  background:
    radial-gradient(980px 560px at 30% 55%, rgba(0,0,0,.30), transparent 64%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 52%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(11,15,20,.16), rgba(11,15,20,.78));
}

/* Este wrapper reemplaza el align-center típico SOLO para esta sección */
.fx-section--contacto{
  padding-top: var(--header-h);
}

#contacto .fx-contactWrap{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

/* Top ocupa más (como en tu captura) */
#contacto .fx-contactTop{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

/* Row similar a servicios */
#contacto .fx-contacto__row{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#contacto .fx-contacto__copy{
  max-width: 860px;
}

#contacto .fx-contacto__title{ max-width: 30ch; }
#contacto .fx-contacto__lead{ max-width: 58ch; margin-top: -4px; }

/* 3 bloques */
#contacto .fx-contacto__blocks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

#contacto .fx-contactCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);

  opacity: .88;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

#contacto .fx-contactCard:hover{
  opacity: 1;
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 54px rgba(0,0,0,.36);
}

#contacto .fx-contactCard__title{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

#contacto .fx-contactCard__text{
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(233,238,246,.72);
}

#contacto .fx-contactCard__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  text-transform: uppercase;

  font-size: 10px;
  letter-spacing: .16em;

  color: var(--ink);
  opacity: .75;

  transition: opacity 180ms ease;
}

#contacto .fx-contactCard__link:hover{ opacity: 1; }

/* Vías directas */
#contacto .fx-direct{ display:flex; flex-direction:column; gap: 10px; }
#contacto .fx-direct__row{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  align-items:center;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#contacto .fx-direct__row:first-child{ border-top:none; padding-top:0; }
#contacto .fx-direct__k{
  font-size: 11px;
  color: rgba(233,238,246,.62);
}
#contacto .fx-direct__v{
  font-size: 11px;
  color: rgba(233,238,246,.86);
  text-decoration:none;
  opacity: .8;
  transition: opacity 180ms ease;
}
#contacto .fx-direct__v:hover{ opacity: 1; }

/* =========================
   FOOTER premium (oscuro, blur, separadores, compacto)
   ========================= */

#contacto .fx-footer{
  flex: 0 0 auto;
  padding: 18px 0 12px;              /* ~20% más bajo */
  background: rgba(6,9,12,.72);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.06);
}

#contacto .fx-footer__inner{
  display:flex;
  flex-direction:column;
  gap: 12px;                         /* menos aire */
}

/* grid con separadores verticales */
#contacto .fx-footer__grid{
  display:grid;
  grid-template-columns: 1.15fr 1.35fr 0.9fr;
  gap: 0;
  align-items: stretch;
}

/* columnas con padding interno (más compacto) */
#contacto .fx-footer__brand,
#contacto .fx-footer__sitemap,
#contacto .fx-footer__social{
  padding: 10px 18px;                /* menos padding */
  min-height: 74px;                  /* más bajo */
}

/* rayitas verticales entre columnas */
#contacto .fx-footer__sitemap,
#contacto .fx-footer__social{
  border-left: 1px solid rgba(255,255,255,.06);
}

/* BRAND: logo alineado a la izquierda y centrado en alto */
#contacto .fx-footer__brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;         /* izquierda */
}

#contacto .fx-footer__logo{
  width: 153px;                       /* 180px -> -15% aprox */
  height:auto;
  opacity:.92;
}

/* TITULARES */
#contacto .fx-footer__ttl{
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 8px;                    /* más compacto */
}

/* MAPA: bloque centrado dentro de su columna, textos a la izquierda */
#contacto .fx-footer__sitemap{
  display:flex;
  flex-direction:column;
  justify-content:center;             /* centrado vertical */
  align-items:center;                 /* centra el bloque */
}

#contacto .fx-footer__sitemap .fx-footer__ttl,
#contacto .fx-footer__sitemap .fx-footer__cols{
  width: min(340px, 100%);            /* bloque compacto */
  text-align:left;
}

#contacto .fx-footer__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* REDES: bloque alineado a la derecha, textos a la izquierda */
#contacto .fx-footer__social{
  display:flex;
  flex-direction:column;
  justify-content:center;             /* centrado vertical */
  align-items:flex-end;               /* derecha (bloque) */
}

#contacto .fx-footer__social .fx-footer__ttl,
#contacto .fx-footer__social a{
  width: min(200px, 100%);            /* bloque compacto */
  text-align:left;                    /* textos izquierda */
}

/* Links */
#contacto .fx-footer__sitemap a,
#contacto .fx-footer__social a{
  display:block;
  text-decoration:none;
  text-transform: uppercase;

  font-size: 9.5px;
  letter-spacing: .14em;

  color: var(--ink);
  opacity: .7;
  padding: 4px 0;                     /* más compacto */
  transition: opacity 180ms ease;
}

#contacto .fx-footer__sitemap a:hover,
#contacto .fx-footer__social a:hover{
  opacity: 1;
}

/* LEGAL inferior */
#contacto .fx-footer__legal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);

  font-size: 8px;
  color: rgba(233,238,246,.55);
}

#contacto .fx-footer__dev{
  text-align:right;
  opacity: .65;
}

/* =========================
   CONTACTO — Vías directas sin hover
   ========================= */

/* Desactiva hover SOLO para la 3ra card */
#contacto .fx-contactCard:nth-child(3){
  transition: none;
}

#contacto .fx-contactCard:nth-child(3):hover{
  transform: none;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  opacity: .88;
}

/* Links desarrolladores */
#contacto .fx-footer__dev a{
  color: rgba(233,238,246,.70);
  text-decoration: none;
  transition: opacity 180ms ease;
}

#contacto .fx-footer__dev a:hover{
  opacity: 1;
}

/* =========================
   CONTACTO — MOBILE (sin footer todavía)
   Orden:
   Textos -> Vías directas (card) -> CTA blanco (ART/Cliente) -> CTA ghost (Prestadores)
   ========================= */
@media (max-width: 900px){

  /* estructura */
  #contacto .fx-contactWrap{
    height: calc(100vh - var(--header-h));
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  #contacto .fx-contactTop{
    flex: 1 1 auto;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0 12px;
  }

  /* tipos como hero */
  #contacto .fx-eyebrow{ font-size:10px; }

  #contacto .fx-contacto__title{
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.06;
  }

  #contacto .fx-contacto__lead{
    font-size: 12px;
    line-height: 1.55;
  }

  #contacto .fx-contacto__row{
    gap: 16px;
  }

  /* layout bloques */
  #contacto .fx-contacto__blocks{
    display:flex;
    flex-direction:column;
    gap: 12px;
  }

  /* ===== ORDEN MOBILE ===== */
  /* 1) Vías directas */
  #contacto .fx-contactCard:nth-child(3){ order: 1; }
  /* 2) CTA blanco (ART/Cliente) */
  #contacto .fx-contactCard:nth-child(1){ order: 2; }
  /* 3) CTA ghost (Prestadores) */
  #contacto .fx-contactCard:nth-child(2){ order: 3; }

  /* ===== CARD BASE SOLO PARA VÍAS DIRECTAS ===== */
  #contacto .fx-contactCard{
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
  }

  /* ===== CTAs SIN CARD ===== */
  #contacto .fx-contactCard:nth-child(1),
  #contacto .fx-contactCard:nth-child(2){
    border:none;
    background:none;
    box-shadow:none;
    padding:0;
  }

  /* Ocultamos texto de esas “cards” */
  #contacto .fx-contactCard:nth-child(1) .fx-contactCard__title,
  #contacto .fx-contactCard:nth-child(1) .fx-contactCard__text,
  #contacto .fx-contactCard:nth-child(2) .fx-contactCard__title,
  #contacto .fx-contactCard:nth-child(2) .fx-contactCard__text{
    display:none;
  }

  /* Link como botón del sistema */
  #contacto .fx-contactCard__link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:36px;
    border-radius:999px;

    text-decoration:none;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11.5px;         /* igual al resto */
    border: 1px solid rgba(255,255,255,.14);

    opacity:.92;
    transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease;
  }

  #contacto .fx-contactCard__link:hover{ opacity:1; }

  /* CTA blanco — ART/Cliente */
  #contacto .fx-contactCard:nth-child(1) .fx-contactCard__link{
    background: rgba(233,238,246,.92);
    color: rgba(11,15,20,.96);
    border-color: rgba(233,238,246,.62);
  }

  /* CTA ghost — Prestadores */
  #contacto .fx-contactCard:nth-child(2) .fx-contactCard__link{
    background: rgba(255,255,255,.06);
    color: rgba(233,238,246,.92);
    border-color: rgba(255,255,255,.14);
  }

  /* ===== VÍAS DIRECTAS (card visible) ===== */
  #contacto .fx-contactCard:nth-child(3) .fx-contactCard__title{
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: -0.01em;
    opacity: .92;
  }

  #contacto .fx-direct{
    display:flex;
    flex-direction:column;
    gap: 10px;
    margin: 0;
  }

  #contacto .fx-direct__row{
    display:grid;
    grid-template-columns: 78px 1fr;
    gap: 10px;
    padding-top: 10px;
  }

  #contacto .fx-direct__row:first-child{ padding-top: 0; }

  #contacto .fx-direct__row + .fx-direct__row{
    border-top: 1px solid rgba(255,255,255,.08);
  }

  #contacto .fx-direct__k{
    font-size: 10.5px;
    color: rgba(233,238,246,.62);
  }

  #contacto .fx-direct__v{
    font-size: 10.5px;
    color: rgba(233,238,246,.86);
    text-decoration:none;
    opacity:.85;
    transition: opacity 180ms ease;
    word-break: break-word;
  }

  #contacto .fx-direct__v:hover{ opacity:1; }
}

/* =========================
   FOOTER — MOBILE (6% alto, ultra compacto premium)
   Reglas:
   - alto ~6vh
   - 2 bloques centrados: logo izq / redes der (texto alineado izq)
   - separador vertical
   - separador horizontal
   - abajo: legales izq / desarrollo der (una línea cada uno)
   ========================= */
@media (max-width: 900px){

  /* FOOTER contenedor */
  #contacto .fx-footer{
    height: 15vh;                 /* objetivo */
    min-height: 56px;            /* piso razonable para móviles chicos */
    /*max-height: 72px;             techo para que no se agrande */
    padding: 0;                  /* cero padding para controlar altura */
    background: rgba(6,9,12,.78);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;            /* evita que “crezca” */
  }

  /* inner compacto */
  #contacto .fx-footer__inner{
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap: 0;
  }

  /* ocultamos sitemap en mobile */
  #contacto .fx-footer__sitemap{ display:none; }

  /* GRID superior: 2 columnas */
  #contacto .fx-footer__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap: 0;
    height: 62%;                 /* parte superior del footer */
    padding: 0 0;
  }

  /* Bloque logo */
  #contacto .fx-footer__brand{
    height: 100%;
    display:flex;
    align-items:center;          /* centrado vertical */
    justify-content:flex-start;  /* izquierda */
    padding-left: 14px;
    padding-right: 12px;
    position: relative;
  }

  /* Separador vertical */
  #contacto .fx-footer__brand::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
    width:1px;
    height: 28px;
    background: rgba(255,255,255,.10);
  }

  /* Logo chico y prolijo */
  #contacto .fx-footer__logo{
    width: 112px;
    height:auto;
    opacity:.92;
  }

  /* Bloque redes (a la derecha, bloque centrado) */
  #contacto .fx-footer__social{
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:center;      /* centrado vertical */
    align-items:center;          /* bloque centrado */
    padding-left: 12px;
    padding-right: 14px;
  }

  /* Textos alineados a la izquierda dentro del bloque */
  #contacto .fx-footer__social .fx-footer__ttl,
  #contacto .fx-footer__social a{
    width: min(190px, 100%);
    text-align:left;
  }

  /* Título redes (micro) */
  #contacto .fx-footer__ttl{
    font-size: 8px;
    letter-spacing: .16em;
    margin: 0 0 2px;
    opacity: .6;
  }

  /* Links redes: 9px, sin interlineado alto */
  #contacto .fx-footer__social a{
    font-size: 9px;
    letter-spacing: .10em;
    line-height: 1.1;
    padding: 1px 0;
    margin: 0;
    color: rgba(233,238,246,.82);
    text-decoration:none;
    opacity:.78;
    transition: opacity 180ms ease;
  }
  #contacto .fx-footer__social a:hover{ opacity:1; }

  /* Separador horizontal antes del legal */
  #contacto .fx-footer__legal{
    height: 38%;                 /* parte inferior */
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;

    border-top: 1px solid rgba(255,255,255,.08);
    padding: 0 14px;

    font-size: 8px;              /* 8 o 7 si hace falta */
    letter-spacing: .06em;
    opacity: .62;

    white-space: nowrap;         /* una sola línea */
  }

  #contacto .fx-footer__copy,
  #contacto .fx-footer__dev{
    white-space: nowrap;
  }

  #contacto .fx-footer__dev{
    text-align:right;
    opacity:.70;
    display: none;
  }

  #contacto .fx-footer__legal a{
    color: rgba(233,238,246,.78);
    text-decoration:none;
    opacity:.85;
  }
  #contacto .fx-footer__legal a:hover{ opacity:1; }
}

/* =====================================================
   MODAL BASE SYSTEM
===================================================== */

.fx-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.fx-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fx-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}

.fx-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(920px, 92%);
  max-height: 85vh;
  overflow: hidden;

  background: linear-gradient(180deg, #0f141a, #0b0f14);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 25px 80px rgba(0,0,0,.6);

  opacity: 0;
  transition: 
    transform .22s cubic-bezier(.22,.61,.36,1),
    opacity .18s ease;
}

.fx-modal.is-open .fx-modal__panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

body.fx-modal-open .fx-main {
  scroll-snap-type: none !important;
}

body.fx-modal-open .fx-header {
  pointer-events: none;
}

/* =========================
   BASES MODAL
========================= */

.fx-bases__header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.fx-bases__brand {
  display:flex;
  align-items:center;
  gap:14px;
}

.fx-bases__brand img {
  width:28px;
  opacity:.9;
}

.fx-bases__divider {
  width:1px;
  height:20px;
  background:rgba(255,255,255,.12);
}

.fx-bases__title {
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.85;
}

.fx-bases__meta {
  display:flex;
  align-items:center;
  gap:18px;
}

.fx-bases__count {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.7;
}

.fx-bases__close {
  background:none;
  border:none;
  cursor:pointer;
}

.fx-bases__x {
  display:inline-block;
  transition:transform .2s ease;
}

.fx-bases__close:hover .fx-bases__x {
  transform:rotate(90deg);
}

/* Filtros */

.fx-bases__filters {
  display:flex;
  gap:12px;
  padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.fx-bases__filters select,
.fx-bases__filters button {
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:white;
  padding:0 14px;
  font-size:13px;
}

.fx-bases__filters button {
  cursor:pointer;
  transition:background .2s ease;
}

.fx-bases__filters button:hover {
  background:rgba(255,255,255,.08);
}

/* Resultados */

.fx-bases__results {
  max-height:340px;
  overflow:auto;
  padding:16px 24px;
}

.fx-bases__row {
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  margin-bottom:10px;
  transition:all .15s ease;
}

.fx-bases__row:hover {
  background:rgba(255,255,255,.06);
}

.fx-bases__name {
  font-size:14px;
}

.fx-bases__metaRow {
  font-size:12px;
  opacity:.6;
  margin-top:4px;
}

/* Legal */

.fx-bases__legal {
  border-top:1px solid rgba(255,255,255,.05);
  padding:14px 24px;
  font-size:10px;
  opacity:.5;
}

/* Mobile */

@media(max-width:900px){
  .fx-bases__filters {
    flex-direction:column;
  }
}

/* =========================
   CLOSE BUTTON — PREMIUM
========================= */

.fx-bases__close {
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(124, 124, 124, 0.08);
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
}

.fx-bases__close-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color: #e9eef6!important;
}

.fx-bases__x {
  font-size:14px;
  transition:transform .3s cubic-bezier(.4,.0,.2,1);
}

.fx-bases__close:hover {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
}

.fx-bases__close:hover .fx-bases__x {
  transform:rotate(90deg) scale(1.05);
}

/* =========================================================
   MODAL MAPA — CSS COMPLETO (solo mapa)
   Requiere HTML:
   #fxMapModal .fx-modal__panel--map
   #fxMapPins, #fxMapProvincia, #fxMapClear
========================================================= */

/* Panel más “cuadrado / compacto” y con margen lateral mínimo */
#fxMapModal .fx-modal__panel--map{
  width: min(490px, calc(100% - 16px));
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* evita que el filtro “corte” raro */
}

/* Header (limpio + elegante) */
#fxMapModal .fx-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#fxMapModal .fx-modal__brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
#fxMapModal .fx-modal__logo{
  width: 26px;
  height: auto;
  opacity: .92;
}
#fxMapModal .fx-modal__vsep{
  width:1px;
  height:18px;
  background: rgba(255,255,255,.14);
}
#fxMapModal .fx-modal__title{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(233,238,246,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fxMapModal .fx-modal__meta{
  display:flex;
  align-items:center;
  gap:12px;
}
#fxMapModal .fx-modal__count{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(233,238,246,.72);
  white-space: nowrap;
}

/* Botón cerrar (X rota 90° en hover) */
#fxMapModal .fx-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,246,.92);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
  opacity: .86;
}
#fxMapModal .fx-modal__close:hover{
  transform: rotate(90deg);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  opacity: 1;
}

/* Filtro provincia — NO debe tapar legal */
#fxMapModal .fx-modal__filters--map{
  display:flex;
  gap:10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#fxMapModal .fx-modal__filters--map .fx-modal__select{
  flex:1;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92);   /* texto claro */
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: .06em;
  outline: none;
}
#fxMapModal .fx-modal__filters--map .fx-modal__select option{
  color: #0b0f14; /* para dropdown nativo, evita “todo oscuro ilegible” */
}

#fxMapModal .fx-modal__filters--map .fx-modal__clear{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92);   /* texto claro */
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor:pointer;
  opacity:.86;
  transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease;
}
#fxMapModal .fx-modal__filters--map .fx-modal__clear:hover{
  opacity:1;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

/* Contenedor del mapa: ocupa el resto del panel y mantiene legal visible */
#fxMapModal .fx-map{
  flex: 1;
  display:flex;
  flex-direction: column;
  padding: 12px 14px 12px; /* aire arriba/abajo y laterales mínimos */
  gap: 10px;
  min-height: 0; /* clave para que no “corte” en flex */
}

/* Stage cuadrado (referencia ~460px) */
#fxMapModal .fx-map__stage{
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1 / 1;     /* CUADRADO */
  margin: 0 auto;          /* centrado */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Imagen del mapa */
#fxMapModal .fx-map__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .96;
  transform: translateZ(0);
  z-index: 1; /* abajo */
}

/* Pins arriba del mapa */
#fxMapModal .fx-map__pins{
  position:absolute;
  inset:0;
  z-index: 2;              /* ARRIBA */
  pointer-events: none;    /* el wrapper no */
}

/* PIN (botón) */
#fxMapModal .fx-pin{
  --fx-pin-icon: url("../assets/icons/marker.svg");
  position:absolute;
  transform: translate(-50%, -100%);
  width: 14px;              /* más visible */
  height: 14px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  pointer-events: auto;     /* el pin sí */
  cursor: pointer;

  opacity: .25;             /* MUY sutil idle */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
  animation: fxPinFloat 3.8s ease-in-out infinite;
}

/* ícono */
#fxMapModal .fx-pin::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--fx-pin-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Hover: destaca + frena animación */
#fxMapModal .fx-pin:hover{
  opacity: 1;
  transform: translate(-50%, -100%) scale(1.08);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55))
          drop-shadow(0 0 10px rgba(255,255,255,.12));
  animation-play-state: paused;
  z-index: 5;
}

/* Tooltip (solo nombre) */
#fxMapModal .fx-pin__bubble{
  position:absolute;
  left:50%;
  top:-10px;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,18,26,.92);
  color: rgba(233,238,246,.96); /* TEXTO CLARO */
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events:none;
  transition: opacity 160ms ease, transform 160ms ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
#fxMapModal .fx-pin:hover .fx-pin__bubble{
  opacity: 1;
  transform: translate(-50%, -110%);
}

/* Animación “agua” MUY sutil */
@keyframes fxPinFloat{
  0%, 100% { transform: translate(-50%, -100%) translateY(0px); }
  50%      { transform: translate(-50%, -100%) translateY(-3px); }
}

/* Legal siempre visible */
#fxMapModal .fx-map__legal{
  text-align:left;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(233,238,246,.60);
  padding-bottom: 2px;
}

/* Mobile */
@media (max-width: 900px){
  #fxMapModal .fx-modal__panel--map{
    width: calc(100% - 12px);
    max-height: 92dvh;
  }
  #fxMapModal .fx-modal__filters--map{
    flex-direction: column;
  }
  #fxMapModal .fx-modal__filters--map .fx-modal__clear{
    width: 100%;
  }

  #fxMapModal .fx-map__stage{
    width: min(420px, 100%);
    border-radius: 14px;
  }

  /* un toque más grandes en mobile */
  #fxMapModal .fx-pin{
    width: 30px;
    height: 30px;
    opacity: .33;
  }
}

/* =========================================================
   MAP MODAL — Mobile tuning (pegar al FINAL del style.css)
========================================================= */

/* Panel: más alto útil en mobile, con aire pero sin “márgenes gigantes” */
@media (max-width: 900px){
  #fxMapModal .fx-modal__panel--map{
    width: calc(100% - 16px);
    max-height: 92dvh;
    border-radius: 18px;
  }

  #fxMapModal .fx-modal__header{
    padding: 12px 14px;
  }

  #fxMapModal .fx-modal__logo{
    width: 26px;
    height: auto;
  }

  #fxMapModal .fx-modal__title{
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .9;
  }

  #fxMapModal .fx-modal__count{
    font-size: 10px;
    letter-spacing: .12em;
    opacity: .8;
  }

  #fxMapModal .fx-modal__close{
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
}

/* Contenedor del mapa: que NUNCA corte el legal */
#fxMapModal .fx-map{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

/* Stage cuadrado SIEMPRE (en desktop lo podés dejar fijo a 460px, acá responsive) */
#fxMapModal .fx-map__stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* clave: cuadrado */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

/* La imagen llena el stage, sin deformar */
#fxMapModal .fx-map__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* mantiene proporción */
  object-position: center;
  display: block;
  opacity: .98;
  z-index: 1;                   /* mapa abajo */
}

/* Pins arriba del mapa */
#fxMapModal .fx-map__pins{
  position: absolute;
  inset: 0;
  z-index: 2;                   /* pins arriba */
  pointer-events: none;         /* el wrapper no captura */
}

/* Cada pin sí captura */
#fxMapModal .fx-pin{
  position: absolute;
  transform: translate(-50%, -85%); /* “punta” cae sobre coord */
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;

  /* icono marker */
  background-image: url("../assets/img/marker.svg"); /* ✅ ruta correcta desde /css */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* sutil por default */
  opacity: .28;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
  animation: fxPinFloat 3.8s ease-in-out infinite;
}

/* Variación suave por pin (sin JS) */
#fxMapModal .fx-pin:nth-child(3n){ animation-duration: 4.4s; }
#fxMapModal .fx-pin:nth-child(4n){ animation-duration: 3.3s; }

@keyframes fxPinFloat{
  0%,100%{ transform: translate(-50%, -85%) translateY(0); }
  50%    { transform: translate(-50%, -85%) translateY(-3px); } /* MUY sutil */
}

/* Hover/Focus: destaca, frena el “agua”, muestra tooltip */
#fxMapModal .fx-pin:hover,
#fxMapModal .fx-pin:focus-visible{
  opacity: .92;
  transform: translate(-50%, -85%) scale(1.08);
  animation-play-state: paused;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  outline: none;
}

/* Tooltip burbuja (nombre) */
#fxMapModal .fx-pin__bubble{
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  white-space: nowrap;

  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(12,18,26,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);

  color: rgba(245,248,255,.96);          /* ✅ texto claro */
  font-size: 12px;
  letter-spacing: .02em;

  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

#fxMapModal .fx-pin:hover .fx-pin__bubble,
#fxMapModal .fx-pin:focus-visible .fx-pin__bubble{
  opacity: 1;
  transform: translate(-50%, -105%);
}

/* En mobile real no hay hover: mostramos tooltip con focus (tap) */
@media (hover: none){
  #fxMapModal .fx-pin{
    width: 12px; height: 12px;          /* un poquito más fácil de tocar */
  }
  #fxMapModal .fx-pin:active{
    opacity: .92;
    transform: translate(-50%, -85%) scale(1.08);
    animation-play-state: paused;
  }
}

/* Legal siempre visible */
#fxMapModal .fx-map__legal{
  font-size: 8px;
  line-height: 1.3;
  opacity: .7;
  padding: 0 2px;
}

/* Si querés el stage con “tamaño target” en desktop */
@media (min-width: 901px){
  #fxMapModal .fx-map__stage{
    width: 460px;
    height: 460px;     /* por si el browser no banca aspect-ratio */
    margin: 0 auto;
  }
}

/* =========================================================
   MODAL — BUSCADOR BASES (PREMIUM)
   Requiere: estructura actual (#fxBasesModal + .fx-modal__panel)
========================================================= */

#fxBasesModal .fx-modal__panel{
  width: min(980px, calc(100% - 28px));
  max-height: min(86vh, 760px);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12,18,26,.98), rgba(8,12,16,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

/* Header */
#fxBasesModal .fx-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

#fxBasesModal .fx-modal__brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

#fxBasesModal .fx-modal__logo{
  width: 28px;
  height: auto;
  opacity: .92;
}

#fxBasesModal .fx-modal__vsep{
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.14);
}

#fxBasesModal .fx-modal__title{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta */
#fxBasesModal .fx-modal__meta{
  display:flex;
  align-items:center;
  gap: 10px;
}

#fxBasesModal .fx-modal__count{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  white-space: nowrap;

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

#fxBasesModal .fx-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92);
  cursor: pointer;
  opacity: .78;
  transition: transform 170ms ease, opacity 170ms ease, background 170ms ease, border-color 170ms ease;
}

#fxBasesModal .fx-modal__close:hover{
  opacity: 1;
  transform: rotate(90deg);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

/* Filtros */
#fxBasesModal .fx-modal__filters{
  display:flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#fxBasesModal .fx-modal__select{
  flex: 1;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92);
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: .04em;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

#fxBasesModal .fx-modal__select:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

#fxBasesModal .fx-modal__select:focus{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}

#fxBasesModal .fx-modal__clear{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92); /* ✅ texto claro */
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .86;
  transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease;
}

#fxBasesModal .fx-modal__clear:hover{
  opacity: 1;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

/* Results — scroll premium + fades */
#fxBasesModal .fx-modal__results{
  position: relative;
  padding: 10px 16px 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Fade superior/inferior (sensación app) */
#fxBasesModal .fx-modal__results::before,
#fxBasesModal .fx-modal__results::after{
  content:"";
  position: sticky;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events:none;
  display:block;
  z-index: 2;
}

#fxBasesModal .fx-modal__results::before{
  top: 0;
  background: linear-gradient(180deg, rgba(8,12,16,.98), rgba(8,12,16,0));
}

#fxBasesModal .fx-modal__results::after{
  bottom: 0;
  background: linear-gradient(0deg, rgba(8,12,16,.98), rgba(8,12,16,0));
}

/* Filas */
#fxBasesModal .fx-baseRow{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  will-change: transform;
}

#fxBasesModal .fx-baseRow + .fx-baseRow{ margin-top: 10px; }

#fxBasesModal .fx-baseRow:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

#fxBasesModal .fx-baseRow__name{
  font-size: 13px;
  letter-spacing: -0.01em;
  color: rgba(233,238,246,.96);
}

#fxBasesModal .fx-baseRow__meta{
  margin-top: 4px;
  font-size: 11px;
  opacity: .72;
  color: rgba(233,238,246,.80);
}

/* Scrollbar */
#fxBasesModal .fx-modal__results::-webkit-scrollbar{ width: 10px; }
#fxBasesModal .fx-modal__results::-webkit-scrollbar-track{ background: transparent; }
#fxBasesModal .fx-modal__results::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
#fxBasesModal .fx-modal__results::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* Legal */
#fxBasesModal .fx-modal__legal{
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 10px;
  opacity: .62;
  letter-spacing: .06em;
}

/* Mobile */
@media (max-width: 900px){
  #fxBasesModal .fx-modal__panel{
    width: calc(100% - 18px);
    max-height: 92dvh;
  }

  #fxBasesModal .fx-modal__filters{
    flex-direction: column;
  }

  #fxBasesModal .fx-modal__clear{
    width: 100%;
  }
}

/* =========================
   FIX — Modal Partners Layout
========================= */

.fx-modal__panel--partners{
  width: min(920px, calc(100% - 28px));
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Asegura que el contenido no estire el panel */
.fx-partners{
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Viewport controlado */
.fx-partners__viewport{
  flex: 1;
  overflow: hidden;
}

/* Slide ocupa exactamente el viewport */
.fx-partnerCard{
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* GRID estable */
.fx-partnerCard__grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 18px;
  align-items: center;
}

/* 🔑 LOGO CONTROLADO */
.fx-partnerCard__logoBox{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  min-height: 120px;
  max-height: 160px;   /* 🔥 evita que crezca infinito */
}

.fx-partnerCard__logo{
  max-width: 100%;
  max-height: 80px;    /* 🔥 límite real del logo */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px){
  .fx-partnerCard__grid{
    grid-template-columns: 1fr;
  }

  .fx-partnerCard__logo{
    max-height: 70px;
  }
}

/* =========================
   MODAL — PARTNERS (Premium)
========================= */

.fx-modal__panel--partners{
  max-width: 980px;
}

/* Header consistente + logo NO gigante */
.fx-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.fx-modal__brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.fx-modal__logo{
  width:28px;
  height:28px;
  flex:0 0 28px;
  object-fit:contain;
  display:block;
}

.fx-modal__vsep{
  width:1px;
  height:22px;
  background: rgba(255,255,255,.14);
}

.fx-modal__title{
  font-size:20px;
  font-weight:700;
  letter-spacing:.2px;
  color: rgba(255,255,255,.92);
}

/* Close “elegante” + giro en hover */
.fx-modal__close{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  line-height:1;
  font-size:18px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.fx-modal__close:hover{
  transform: rotate(90deg);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* ===== Partners layout ===== */
.fx-partners{
  position:relative;
  padding: 16px 18px 16px;
}

.fx-partners__viewport{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 40px rgba(0,0,0,.35) inset;
}

.fx-partners__track{
  display:flex;
  width:100%;
  transform: translateX(0);
  transition: transform .35s ease;
  will-change: transform;
}

/* slide full width */
.fx-partners__slide{
  width:100%;
  flex: 0 0 100%;
  padding: 22px;
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items:center;
}

/* logo del partner */
/* =========================
   LOGO PARTNER — BLOQUE FIJO PREMIUM
========================= */

.fx-partnerLogo{
  width: 180px;        /* ancho fijo desktop */
  height: 145px;       /* alto fijo desktop */
  flex: 0 0 180px;     /* no se estira ni se achica */
  
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255, 255, 255, 1);

  position: relative;
  overflow: hidden;
}

/* efecto sutil premium */
.fx-partnerLogo::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

/* imagen SIEMPRE centrada */
.fx-partnerLogo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}

/* content */
.fx-partner__name{
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  margin: 0 0 10px;
}

.fx-partner__desc{
  margin: 0 0 14px;
  color: rgba(255,255,255,.80);
  font-size: 16px;
  line-height: 1.35;
  max-width: 52ch;
}

/* stats mini-cards */
.fx-partnerStats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.fx-statMini{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 12px 10px;
}

.fx-statMini__label{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  letter-spacing:.2px;
  margin-bottom: 6px;
}

.fx-statMini__value{
  color: rgba(255,255,255,.95);
  font-size: 20px;
  font-weight: 800;
}

/* arrows */
.fx-partners__nav{
  position:absolute;
  top: 88%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background .18s ease, transform .18s ease;
}

.fx-partners__nav:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-50%) scale(1.03);
}

.fx-partners__nav--prev{ left: 800px; }
.fx-partners__nav--next{ right: 17px; }

.fx-partners__nav.is-hidden{ display:none; }

/* dots */
.fx-partners__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding: 12px 0 6px;
}

.fx-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}

.fx-dot.is-active{
  background: rgba(255,255,255,.70);
}

/* legal */
.fx-partners__legal{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-align:left;
}

/* Responsive */
@media (max-width: 820px){
  .fx-partners__slide{
    grid-template-columns: 1fr;
  }
  .fx-partnerLogo{
    height: 74px;
    justify-content:flex-start;
    padding: 0 14px;
  }
  .fx-partnerStats{
    grid-template-columns: 1fr;
  }
  .fx-partners__nav{
    display:none; /* mobile: arrastre */
  }
}

@media (max-width: 820px){

  .fx-partnerLogo{
    width: 100%;
    height: 110px;   /* mismo alto siempre */
    flex: none;
  }

  .fx-partnerLogo img{
    max-width: 60%;
    max-height: 70%;
  }

}
@media (max-width: 820px){

  /* Contenedor del slide */
  .fx-partnerCard{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* GRID 2x2 (4 cuadrados) */
  .fx-partnerTop{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap:10px;
  }

  /* “cuadrados” consistentes */
  .fx-partnerLogo,
  .fx-partnerStat{
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255);
    min-height: 108px; /* ajustá a gusto */
    overflow:hidden;
  }

  /* LOGO: fijo y centrado */
  .fx-partnerLogo{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
  }
  .fx-partnerLogo img{
    width: 75%;
    height: 75%;
    object-fit: cover;
    display:block;
  }

  /* STATS: centrado premium */
  .fx-partnerStat{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:12px 12px;
    gap:6px;
  }
  .fx-partnerStat__label{
    font-size: 12px;
    opacity:.78;
    letter-spacing:.02em;
  }
  .fx-partnerStat__num{
    font-size: 22px;
    font-weight: 750;
    line-height: 1;
  }

  /* Texto debajo (limpio) */
  .fx-partnerText{
    padding: 2px 2px 0;
  }
  .fx-partnerName{
    margin:0 0 8px;
    font-size: 18px;
    line-height:1.1;
  }
  .fx-partnerDesc{
    margin:0;
    font-size: 14px;
    line-height:1.4;
    opacity:.85;
  }
}

/* =========================================================
   PARTNERS — Mobile compact (<=900px)
   - achica paddings / tipografías
   - barra centrada: prev + dots + next
   - legal abajo solo
   Pegar al FINAL del style.css (reemplaza el bloque anterior)
========================================================= */

@media (max-width: 900px){

  /* panel más compacto */
  .fx-modal__panel--partners{
    width: min(660px, calc(100vw - 18px));
    max-height: calc(100vh - 18px);
  }

  /* header compacto */
  .fx-modal__panel--partners .fx-modal__header{
    padding: 12px 14px;
  }
  .fx-modal__panel--partners .fx-modal__logo{
    width: 26px;
    height: auto;
  }
  .fx-modal__panel--partners .fx-modal__title{
    font-size: 18px;
    letter-spacing: .2px;
  }
  .fx-modal__panel--partners .fx-modal__close{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 20px;
  }

  .fx-partners{
    padding: 12px;
  }

  .fx-partners__viewport{
    border-radius: 18px;
  }

  /* slide más apretado (1 columna) */
  .fx-partners__slide{
    padding: 12px 12px 10px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* logo más compacto */
  .fx-partnerLogo{
    height: 120px;
    border-radius: 16px;
  }

  /* texto más chico */
  .fx-partner__name{
    font-size: 20px;
    margin: 2px 0 4px;
  }

  .fx-partner__desc{
    font-size: 13px;
    margin: 0 0 10px;
    line-height: 1.35;
    opacity: .9;
  }

  /* stats apilados */
  .fx-partnerStats{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .fx-statMini{
    border-radius: 14px;
    padding: 10px 12px;
  }

  .fx-statMini__label{
    font-size: 11px;
    margin-bottom: 6px;
    opacity: .7;
  }

  .fx-statMini__value{
    font-size: 24px;
  }

  /* ===================================================
     NAV CENTER BAR: prev + dots + next (centrados)
     =================================================== */

  /* aseguramos que no queden "absolute" de desktop */
  .fx-partners__nav,
  .fx-partners__dots{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* barra centrada */
  .fx-partners__navBar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }

  /* como no tenemos wrapper en HTML, lo simulamos con grid */
  .fx-partners{
    display: grid;
    grid-template-areas:
      "viewport"
      "nav"
      "legal";
    gap: 10px;
  }

  #fxPartnersViewport{ grid-area: viewport; }

  /* nav items al área nav */
  .fx-partners__nav--prev,
  .fx-partners__dots,
  .fx-partners__nav--next{
    grid-area: nav;
  }

  /* creamos el layout centrado dentro del área nav */
  .fx-partners__dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
  }

  /* dot más chico */
  .fx-dot{
    width: 4px;
    height: 4px;
    border-radius: 999px;
  }
  .fx-dot.is-active{
    transform: scale(1.35);
  }

  /* flechas: más chicas pero visibles */
  .fx-partners__nav{
    width: 30px;
    height: 30px;
    border-radius: 11px;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;

    /* contraste asegurado */
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 10px 26px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  .fx-partners__nav:active{
    transform: translateY(1px);
  }

  /* centrado real: usamos justify-self dentro del grid */
  .fx-partners__nav--prev{ justify-self: center; margin-right: 100px; }
  .fx-partners__nav--next{ justify-self: center; margin-left: 100px; }
  .fx-partners__dots{ justify-self: center; }

  /* ===================================================
     Legal abajo, solo
     =================================================== */
  .fx-partners__legal{
    grid-area: legal;
    margin-top: 0;
    font-size: 9px;
    line-height: 1.2;
    opacity: .65;
    padding: 0 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* =========================
   MODAL — FORM (ART / Cliente)
   Scope: .fx-modal__panel--form + .fx-form
========================= */

/* Panel específico del form */
.fx-modal__panel--form{
  width: min(720px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,16,22,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.05) inset;
}

/* Header reutiliza tu sistema de modal, pero lo “premiumizamos” solo en form */
.fx-modal__panel--form .fx-modal__header{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.04),
    rgba(255,255,255,0)
  );
}

.fx-modal__panel--form .fx-modal__brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.fx-modal__panel--form .fx-modal__logo{
  width: 30px;
  height: 30px;
  display:block;
  flex: 0 0 auto;
}

.fx-modal__panel--form .fx-modal__vsep{
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.14);
  flex: 0 0 auto;
}

.fx-modal__panel--form .fx-modal__title{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,238,246,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close premium (rotación de la X) */
.fx-modal__panel--form .fx-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.fx-modal__panel--form .fx-modal__close:hover{
  transform: rotate(90deg);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

/* Contenedor del form con scroll propio */
.fx-form{
  padding: 14px 16px 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Cuerpo */
.fx-form__body{
  display: grid;
  gap: 14px;
}

/* Grid 2 columnas */
.fx-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Field */
.fx-field{
  display:grid;
  gap: 6px;
}

.fx-field__label{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,238,246,.68);
}

.fx-field__input,
.fx-field__textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.94);
  outline: none;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

/* Input */
.fx-field__input{
  height: 44px;
  padding: 0 12px;
}

/* Textarea */
.fx-field__textarea{
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
}

.fx-field__input::placeholder,
.fx-field__textarea::placeholder{
  color: rgba(233,238,246,.40);
}

/* Full width helper */
.fx-field--full{
  grid-column: 1 / -1;
}

/* Focus states */
.fx-field__input:focus,
.fx-field__textarea:focus{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

/* Checks */
.fx-form__checks{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: 2px;
}

.fx-check{
  display:flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  user-select:none;
  color: rgba(233,238,246,.80);
  font-size: 12px;
}

.fx-check input{
  width: 16px;
  height: 16px;
  accent-color: rgba(233,238,246,.92);
}

/* Footer */
.fx-form__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.fx-form__legal{
  font-size: 11px;
  color: rgba(233,238,246,.58);
  line-height: 1.3;
}

/* Actions */
.fx-form__actions{
  display:flex;
  gap: 10px;
  flex: 0 0 auto;
}

.fx-btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,246,.92);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.fx-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.fx-btn--primary{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.fx-btn--ghost{
  background: transparent;
}

/* Responsive */
@media (max-width: 900px){
  .fx-modal__panel--form{
    width: calc(100vw - 18px);
    max-height: 86vh;
    border-radius: 18px;
  }

  .fx-form{
    padding: 12px 12px 14px;
  }

  .fx-modal__panel--form .fx-modal__header{
    padding: 12px 12px;
  }

  .fx-form__grid{
    grid-template-columns: 1fr;
  }

  .fx-form__footer{
    flex-direction: column;
    align-items: stretch;
  }

  .fx-form__actions{
    justify-content: flex-end;
  }
}
/* =========================
   FORM — TUNING PREMIUM (override)
   Pegarlo debajo del CSS anterior
========================= */

/* Panel un toque más “tight” */
.fx-modal__panel--form .fx-modal__header{
  padding: 12px 14px;
}
.fx-form{
  padding: 12px 14px 14px;
}

/* Título más fino */
.fx-modal__panel--form .fx-modal__title{
  font-size: 12px;
  letter-spacing: .10em;
}

/* Inputs más chicos */
.fx-field__label{
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .92;
}

.fx-field__input{
  height: 38px;
  padding: 0 11px;
  border-radius: 12px;
  font-size: 13px;
}

.fx-field__textarea{
  min-height: 96px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 13px;
}

/* Bordes más sutiles */
.fx-field__input,
.fx-field__textarea{
  border-color: rgba(255,255,255,.085);
  background: rgba(255,255,255,.028);
}

.fx-field__input:focus,
.fx-field__textarea:focus{
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}

/* Checks: custom (sin look nativo) */
.fx-form__checks{
  gap: 8px 12px;
}

.fx-check{
  position: relative;
  gap: 10px;
  font-size: 12px;
  color: rgba(233,238,246,.78);
}

.fx-check input{
  /* escondemos el nativo */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fx-check span{
  display:flex;
  align-items:center;
  gap: 10px;
  line-height: 1.2;
}

/* cajita */
.fx-check span::before{
  content:"";
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

/* tilde */
.fx-check span::after{
  content:"";
  width: 8px;
  height: 4px;
  border-left: 2px solid rgba(12,16,22,0);
  border-bottom: 2px solid rgba(12,16,22,0);
  transform: rotate(-45deg) scale(.9);
  position: relative;
  left: -22px;
  top: 0px;
  transition: border-color 140ms ease;
  pointer-events:none;
}

/* checked */
.fx-check input:checked + span::before{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-.5px);
}
.fx-check input:checked + span::after{
  border-color: rgba(12,16,22,.92);
}

/* hover sutil */
.fx-check:hover span::before{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}

/* Botones más compactos */
.fx-btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 10px;
  letter-spacing: .14em;
}

.fx-form__legal{
  font-size: 10px;
  opacity: .85;
}

/* Close un poquito más chico */
.fx-modal__panel--form .fx-modal__close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

/* Footer más fino */
.fx-form__footer{
  padding-top: 10px;
}

/* Mobile aún más compacto */
@media (max-width: 900px){
  .fx-modal__panel--form .fx-modal__header{
    padding: 11px 12px;
  }
  .fx-form{
    padding: 11px 12px 12px;
  }

  .fx-field__input{ height: 36px; }
  .fx-btn{ height: 34px; padding: 0 11px; }
}

/* =========================
   FORM — MOBILE (sin scroll, -15%)
========================= */
@media (max-width: 900px){

  /* Panel ocupa pantalla */
  .fx-modal__panel--form{
    width: min(520px, calc(100vw - 16px));
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    display: flex;
    flex-direction: column;
  }

  /* Header compactito */
  .fx-modal__panel--form .fx-modal__header{
    padding: 10px 12px;
  }
  .fx-modal__panel--form .fx-modal__title{
    font-size: 11px;
    letter-spacing: .12em;
  }
  .fx-modal__panel--form .fx-modal__close{
    width: 34px;
    height: 34px;
  }

  /* Cuerpo: distribución vertical, footer pegado abajo */
  .fx-form{
    padding: 10px 12px 12px;
    flex: 1;
    min-height: 0;
    display: flex;
  }
  .fx-form__body{
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Grid + mensaje: toman el “alto disponible” sin empujar el footer */
  .fx-form__grid{
    gap: 10px;
  }

  /* -15% aprox en tamaños */
  .fx-field__label{
    font-size: 8.5px;
    letter-spacing: .16em;
  }
  .fx-field__input{
    height: 34px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 12px;
  }
  .fx-field__textarea{
    min-height: 84px;
    padding: 9px 10px;
    border-radius: 11px;
    font-size: 12px;
  }

  /* Checks más compactos */
  .fx-form__checks{
    gap: 8px;
    padding-top: 2px;
  }
  .fx-check{
    font-size: 11px;
  }
  .fx-check span::before{
    width: 15px;
    height: 15px;
    border-radius: 6px;
  }

  /* Footer siempre al fondo */
  .fx-form__footer{
    margin-top: auto;           /* 👈 clave */
    padding-top: 10px;
    gap: 10px;
  }
  .fx-form__legal{
    font-size: 9px;
    opacity: .85;
  }

  /* Acciones más chicas */
  .fx-btn{
    height: 32px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 9px;
    letter-spacing: .14em;
  }
  .fx-form__actions{
    gap: 8px;
  }

  /* Ajuste extra: si el alto es chico, apretamos un poco más */
  @media (max-height: 720px){
    .fx-modal__panel--form{ height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
    .fx-modal__panel--form .fx-modal__header{ padding: 9px 11px; }
    .fx-form{ padding: 9px 11px 11px; }
    .fx-field__input{ height: 32px; }
    .fx-field__textarea{ min-height: 76px; }
    .fx-btn{ height: 30px; }
  }
}

/* =========================
   FORM — File upload (premium)
========================= */

.fx-field__file{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}

.fx-file{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.fx-file:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.fx-file:active{
  transform: translateY(0px);
}

.fx-file__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size:18px;
  line-height:1;
  opacity:.95;
}

.fx-file__text{
  flex:1;
  min-width: 0;
}

.fx-file__title{
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .2px;
}

.fx-file__hint{
  margin-top:3px;
  font-size: 11px;
  opacity: .72;
}

.fx-file__chip{
  font-size: 11px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  opacity: .9;
  max-width: 170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Error state */
.fx-field__error{
  display:none;
  margin-top:8px;
  font-size: 11px;
  opacity:.95;
  color: rgba(255,255,255,.92);
}

.fx-field.is-error .fx-file{
  border-color: rgba(255, 120, 120, .55);
  background: rgba(255, 120, 120, .08);
}

.fx-field.is-error .fx-field__error{
  display:block;
}

/* =========================
   FORM — FILE UPLOAD (Prestadores)
   (para el bloque nuevo: CTA + legal + error)
========================= */

/* oculto el input real */
.fx-field__file{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* CTA clickeable */
.fx-fileCta{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#eaf0ff;
  cursor:pointer;
  user-select:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  text-align:left;
}

.fx-fileCta:hover{
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.fx-fileCta:active{ transform: translateY(0); }

.fx-fileCta:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* iconito + */
.fx-fileCta__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.10);
  font-size:18px;
  line-height:1;
  flex: 0 0 34px;
}

.fx-fileCta__txt{
  font-size:13.5px;
  letter-spacing:.2px;
  opacity:.95;
  flex: 1 1 auto;
}

/* chip derecha */
.fx-fileCta__chip{
  font-size:11px;
  padding:6px 9px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  opacity:.9;
  flex: 0 0 auto;
}

/* cuando hay archivo seleccionado (agregamos clase desde JS) */
.fx-field.is-file-selected .fx-fileCta{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.fx-field.is-file-selected .fx-fileCta__chip{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  opacity: 1;
}

/* legal chiquito */
.fx-fileLegal{
  margin-top:8px;
  font-size:10.5px;
  opacity:.55;
  line-height:1.2;
}

/* error (oculto por defecto) */
.fx-field__error{
  display:none;
  margin-top:8px;
  font-size:11px;
  color: rgba(255,110,110,.95);
}

/* mostrar error: agregá .is-error al .fx-field */
.fx-field.is-error .fx-fileCta{
  border-color: rgba(255,110,110,.55);
  background: rgba(255,110,110,.07);
}
.fx-field.is-error .fx-field__error{
  display:block;
}

/* =========================
   MOBILE tweaks (si ya tenés media en 900/820)
========================= */
@media (max-width: 900px){
  .fx-fileCta{ padding:11px 11px; border-radius:13px; }
  .fx-fileCta__icon{ width:32px; height:32px; border-radius:11px; flex-basis:32px; }
  .fx-fileCta__txt{ font-size:13px; }
  .fx-fileCta__chip{ font-size:10.5px; padding:5px 8px; }
  .fx-fileLegal{ font-size:10px; }
}

/* =========================
   MOBILE — Textarea más compacto
========================= */
@media (max-width: 900px){

  .fx-field__textarea{
    min-height: 61px;     /* antes ~92px */
    max-height: 61px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.2;
    resize: none;         /* evita que el usuario lo agrande */
  }

}

/* =========================
   CONTACTO — sin efecto lift
   mantiene glow
========================= */

#contacto .fx-card:hover,
#contacto .fx-block:hover,
#contacto .fx-contactCard:hover{
  transform: none !important;       /* no se levanta */
}

/* si el lift estaba en estado activo */
#contacto .fx-card,
#contacto .fx-block,
#contacto .fx-contactCard{
  transition: box-shadow 200ms ease; /* solo glow */
}

.grecaptcha-badge {
  visibility: hidden;
}