/* ============================================================
   SIEX · Directorio de Socios — Design System
   Apple-inspired · Liquid Glass · AGEXPORT
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Marca */
  --navy-900:#071a45;
  --navy-800:#0b245c;
  --navy-700:#12306f;
  --navy-600:#1b3f8f;
  --navy-500:#2a55b0;
  --orange-600:#d4540c;
  --orange-500:#f26722;
  --orange-400:#ff8a3d;
  /* Variantes accesibles: texto blanco sobre --orange-cta y texto --orange-ink sobre claros
     alcanzan 4.5:1 (WCAG AA). El naranja de marca se conserva para acentos y degradados. */
  --orange-cta:#c9500b;
  --orange-cta-2:#ab4308;
  --orange-ink:#bd4a0a;

  /* Neutros */
  --ink-900:#0a0f1d;
  --ink-800:#141a2b;
  --ink-700:#2b3348;
  --ink-600:#4a5468;
  --ink-500:#6b7688;
  --ink-400:#97a1b2;
  --ink-300:#c4ccd9;
  --ink-200:#e2e7ef;
  --ink-100:#f0f3f8;
  --ink-050:#f7f9fc;
  --white:#fff;

  /* Superficies glass */
  --glass-bg:rgba(255,255,255,.66);
  --glass-bg-strong:rgba(255,255,255,.82);
  --glass-bg-soft:rgba(255,255,255,.45);
  --glass-brd:rgba(255,255,255,.7);
  --hairline:rgba(11,36,92,.07);
  --glass-brd-soft:rgba(11,36,92,.08);
  --glass-blur:saturate(180%) blur(20px);
  --glass-blur-lg:saturate(200%) blur(40px);

  /* Sombras (capas suaves, estilo Apple) */
  --sh-xs:0 1px 1px rgba(7,26,69,.04);
  --sh-sm:0 1px 2px rgba(7,26,69,.04),0 1px 5px rgba(7,26,69,.04);
  --sh-md:0 1px 3px rgba(7,26,69,.04),0 6px 18px rgba(7,26,69,.06);
  --sh-lg:0 2px 6px rgba(7,26,69,.04),0 14px 34px rgba(7,26,69,.09);
  --sh-xl:0 6px 14px rgba(7,26,69,.05),0 28px 60px rgba(7,26,69,.13);
  --sh-glow:0 10px 30px rgba(242,103,34,.28);

  /* Núcleos: base (fondo sólido, ≥4.5:1 con blanco) / claro (degradado) / ink (texto sobre tintes) */
  --n-logistica:#0a7d76;      --n-logistica-2:#16b39a;  --n-logistica-ink:#096d69;
  --n-fortalecimiento:#8c1d2a;--n-fortalecimiento-2:#c0392f;--n-fortalecimiento-ink:#781b28;
  --n-contables:#1668c1;      --n-contables-2:#3f9bee;  --n-contables-ink:#135ba9;
  --n-ambientales:#1e7a47;    --n-ambientales-2:#3fae63;--n-ambientales-ink:#1a6a41;
  --n-financieros:#16357a;    --n-financieros-2:#2f63c4;--n-financieros-ink:#132f6c;
  --n-legales:#6a28d8;        --n-legales-2:#9b5cff;    --n-legales-ink:#5b24bc;

  /* Tipografía */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",
         Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-display:clamp(2.1rem,1.35rem + 3.1vw,3.4rem);
  --fs-h1:clamp(2rem,1.3rem + 2.8vw,3.1rem);
  --fs-h2:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  --fs-h3:clamp(1.15rem,1.02rem + .55vw,1.45rem);
  --fs-body:1rem;
  --fs-sm:.9125rem;
  --fs-xs:.8125rem;
  --fs-2xs:.72rem;

  /* Layout */
  --wrap:1220px;
  --gutter:clamp(1rem,.6rem + 1.9vw,2.25rem);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-pill:999px;
  --nav-h:68px;

  /* Motion — curvas tipo Apple */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s; --t-mid:.34s; --t-slow:.62s;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
  color:var(--ink-800);background:var(--ink-050);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--orange-500);outline-offset:3px;border-radius:6px}
::selection{background:rgba(242,103,34,.22)}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
input[type="search"]{appearance:none;-webkit-appearance:none}

/* ---------- 3. UTIL ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100px;left:12px;z-index:200;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  background:var(--navy-800);color:#fff;font-weight:600;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:12px}
.eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ink)}
.muted{color:var(--ink-500)}
[hidden]{display:none!important}

/* ---------- 4. FONDO AMBIENTAL ---------- */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#f7f9fc 0%,#eef2fa 45%,#f7f9fc 100%)}
.ambient span{position:absolute;border-radius:50%;filter:blur(84px);opacity:.26;
  will-change:transform;animation:drift 26s var(--ease) infinite alternate}
.ambient span:nth-child(1){width:46vw;height:46vw;top:-14vw;left:-10vw;
  background:radial-gradient(circle,#2a55b0,transparent 68%)}
.ambient span:nth-child(2){width:38vw;height:38vw;top:22vw;right:-12vw;
  background:radial-gradient(circle,#f26722,transparent 66%);opacity:.14;animation-delay:-8s}
.ambient span:nth-child(3){width:34vw;height:34vw;bottom:-10vw;left:26vw;
  background:radial-gradient(circle,#19c2a0,transparent 68%);opacity:.13;animation-delay:-15s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3vw,-4vw,0) scale(1.1)}
  100%{transform:translate3d(-3vw,3vw,0) scale(.95)}
}

/* ---------- 5. GLASS ---------- */
.glass{
  position:relative;background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:var(--sh-md);
}
/* Borde de luz superior (specular rim) */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.8),rgba(255,255,255,0) 38%);
  opacity:.55;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.95)}
}

/* ---------- 6. NAVBAR ---------- */
.nav{
  position:relative;z-index:100;height:var(--nav-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(11,36,92,.07);
  transition:box-shadow var(--t-mid) var(--ease),background var(--t-mid) var(--ease),
             height var(--t-mid) var(--ease);
}

.nav__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:1rem;height:100%}
.nav__center{display:flex;justify-content:center;min-width:0}
.nav__end{display:flex;align-items:center;gap:.4rem;justify-self:end}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;letter-spacing:-.02em;
  color:var(--navy-800);flex-shrink:0;transition:transform var(--t-fast) var(--ease)}
.brand:hover{transform:translateY(-1px)}
.brand__mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy-600),var(--navy-900));color:#fff;
  font-weight:800;font-size:.95rem;letter-spacing:-.03em;box-shadow:var(--sh-sm)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__txt b{font-size:1.02rem;letter-spacing:-.025em}
.brand__txt small{font-size:.63rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-500)}
.nav__links{display:flex;gap:.15rem}
.nav__link{position:relative;padding:.55rem .95rem .6rem;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:550;color:var(--ink-600);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav__link::after{content:"";position:absolute;left:50%;bottom:.24rem;translate:-50% 0;
  width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange-500),var(--orange-400));
  transition:width .34s var(--ease-out),opacity var(--t-fast) var(--ease);opacity:0}
.nav__link:hover::after,.nav__link:focus-visible::after{width:18px;opacity:1}
.nav__link:hover{color:var(--navy-900);background:rgba(11,36,92,.04)}
.nav__link[aria-current="page"]{color:var(--navy-900);font-weight:600;background:rgba(11,36,92,.055)}
.nav__link[aria-current="page"]::after{width:14px;opacity:1;animation:navdot .42s var(--ease-out)}
@keyframes navdot{from{width:0;opacity:0}to{width:14px;opacity:1}}
.nav__burger{display:none;width:40px;height:40px;border-radius:11px;align-items:center;
  justify-content:center;color:var(--navy-800);transition:background var(--t-fast) var(--ease)}
.nav__burger:hover{background:rgba(11,36,92,.06)}

/* ---------- 7. BOTONES ---------- */
.btn{
  --btn-bg:var(--navy-800);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.3rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:-.008em;color:var(--btn-fg);background:var(--btn-bg);isolation:isolate;
  box-shadow:var(--sh-xs);overflow:hidden;white-space:nowrap;
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease),
             background .28s var(--ease),color .28s var(--ease);
}
.btn::after{ /* brillo especular que sigue al cursor */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);
  transition:opacity var(--t-mid) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn--primary{--btn-bg:linear-gradient(135deg,var(--orange-cta),var(--orange-cta-2));
  box-shadow:0 2px 8px rgba(201,80,11,.2)}
.btn--primary:hover{box-shadow:0 6px 18px rgba(201,80,11,.26)}
.btn--ghost{--btn-bg:rgba(255,255,255,.7);--btn-fg:var(--navy-800);
  border:1px solid rgba(11,36,92,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn--ghost:hover{--btn-bg:rgba(255,255,255,.95)}
/* Botón teñido con el color del núcleo: menos ruido cromático en la rejilla */
.btn--soft{--btn-bg:color-mix(in srgb,var(--c,var(--navy-700)) 12%,#fff);
  --btn-fg:var(--ci,var(--navy-800));
  border:1px solid color-mix(in srgb,var(--c,var(--navy-700)) 22%,transparent);
  box-shadow:none}
.btn--soft:hover{--btn-bg:linear-gradient(135deg,var(--c),var(--c2,var(--c)));--btn-fg:#fff;
  border-color:transparent;
  box-shadow:0 6px 18px color-mix(in srgb,var(--c) 32%,transparent)}
.btn--block{width:100%}
.btn--sm{padding:.52rem 1rem;font-size:var(--fs-xs)}
.btn--lg{padding:.95rem 1.8rem;font-size:1rem}
.btn__ico{width:17px;height:17px;flex:none}

/* ---------- 8. HERO ---------- */
/* El resplandor va como fondo del propio hero: así no hace falta `overflow:hidden`,
   que recortaba el desplegable de sugerencias al salirse del bloque. */
.hero{position:relative;
  padding:clamp(1.8rem,1.2rem + 2.6vw,3.2rem) 0 clamp(1.4rem,1rem + 2vw,2.4rem);
  background:radial-gradient(52% 58% at 50% 6%,rgba(42,85,176,.15),transparent 72%)}
.hero__glow{display:none}
.hero__inner{position:relative;max-width:830px;margin-inline:auto;text-align:center}
.hero h1{font-size:var(--fs-display);font-weight:700;letter-spacing:-.038em;line-height:1.06;
  color:var(--navy-900);margin-block:.55rem .75rem;text-wrap:balance}
/* Degradado cálido y vivo: se mantiene dentro de la gama naranja para no “embarrarse” */
.hero h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--orange-600) 0%,var(--orange-500) 45%,#ffab5e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-inline:.04em}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{color:var(--orange-600);-webkit-text-fill-color:currentColor}}
.hero__sub{font-size:clamp(.98rem,.94rem + .3vw,1.1rem);color:var(--ink-600);max-width:58ch;
  margin-inline:auto;text-wrap:pretty}

/* Buscador hero */
.searchbar{position:relative;z-index:70;display:flex;align-items:center;gap:.6rem;margin:1.7rem auto 0;
  max-width:620px;padding:.45rem .45rem .45rem 1.1rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.88);border:1px solid var(--hairline);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--sh-md);transition:box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.searchbar:focus-within{box-shadow:var(--sh-lg),0 0 0 3px rgba(242,103,34,.13);
  border-color:rgba(242,103,34,.32)}
.searchbar__ico{width:19px;height:19px;color:var(--ink-400);flex:none}
.searchbar input{flex:1;min-width:0;border:0;background:none;padding:.75rem 0;font-size:1rem;
  letter-spacing:-.01em}
.searchbar input:focus-visible{outline:none}
.searchbar input::placeholder{color:var(--ink-400)}
.searchbar__clear{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-200);color:var(--ink-600);flex:none;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-spring)}
.searchbar__clear:hover{background:var(--ink-300);color:var(--navy-900)}

/* Sugerencias */
.suggest{position:absolute;top:calc(100% + .55rem);left:0;right:0;z-index:60;
  border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--hairline);box-shadow:var(--sh-lg);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-mid) var(--ease-out)}
.suggest.is-open{opacity:1;transform:none;pointer-events:auto}
.suggest li+li{border-top:1px solid var(--hairline)}
.suggest button{display:flex;align-items:center;gap:.75rem;width:100%;padding:.7rem 1rem;
  text-align:left;font-size:var(--fs-sm);transition:background var(--t-fast) var(--ease)}
.suggest button:hover,.suggest button:focus-visible,.suggest .is-active button{background:rgba(42,85,176,.07)}
.suggest button>svg{width:17px;height:17px;flex:none;color:var(--ink-400)}
.suggest b{font-weight:650;color:var(--navy-800)}
.suggest small{margin-left:auto;font-size:var(--fs-2xs);color:var(--ink-500);white-space:nowrap}

/* ---------- 9. STATS ---------- */
.stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:560px;margin:1.4rem auto 0;
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hairline);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-sm)}
.stats div{padding:1.05rem .75rem;text-align:center}
.stats div+div{border-left:1px solid var(--hairline)}
.stats b{display:block;font-size:clamp(1.7rem,1.25rem + 1.5vw,2.45rem);font-weight:800;
  letter-spacing:-.05em;color:var(--navy-900);font-variant-numeric:tabular-nums;line-height:1.22}
.stats div>span{display:block;margin-top:.3rem;font-size:var(--fs-2xs);font-weight:550;
  letter-spacing:.075em;text-transform:uppercase;color:var(--ink-500)}
.stats b span{font:inherit;letter-spacing:inherit;color:inherit}

/* Odómetro: cada dígito rueda hacia arriba como el rodillo de un despertador */
.odo{display:inline-flex;align-items:flex-start;height:1.22em;overflow:hidden;
  vertical-align:baseline}
.odo__s{display:block;height:1.22em;line-height:1.22em}
.odo__d{display:block;height:1.22em;overflow:hidden}
.odo__r{display:block;will-change:transform;
  transition:transform 1.55s cubic-bezier(.62,.02,.18,1);transform:translate3d(0,0,0)}
.odo__r span{display:block;height:1.22em;line-height:1.22em}

/* ---------- 10. TOOLBAR (filtros) ---------- */
.toolbar{position:sticky;top:12px;z-index:10;margin-bottom:1.5rem;
  padding:.9rem 1rem;border-radius:var(--r-xl);
  background:rgba(255,255,255,.82);border:1px solid var(--hairline);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--t-mid) var(--ease),background var(--t-mid) var(--ease)}
.toolbar.is-stuck{box-shadow:var(--sh-md);background:rgba(255,255,255,.97)}
.toolbar__row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;flex:1;min-width:0}
.chip{
  --c:var(--navy-700);
  display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:550;color:var(--ink-600);background:transparent;
  border:1px solid var(--hairline);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease)}
.chip:hover{background:rgba(11,36,92,.04);color:var(--navy-900);border-color:rgba(11,36,92,.13)}
.chip__dot{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;
  transition:background var(--t-fast) var(--ease)}
.chip[aria-pressed="true"]{color:#fff;background:var(--c);border-color:transparent;font-weight:600}
.chip[aria-pressed="true"] .chip__dot{background:rgba(255,255,255,.9)}
.chip__n{font-size:var(--fs-2xs);opacity:.7;font-variant-numeric:tabular-nums}

/* Segmented control */
.segmented{position:relative;display:flex;padding:3px;border-radius:var(--r-pill);
  background:rgba(11,36,92,.07);flex:none}
.segmented__thumb{position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--sh-sm);transition:transform var(--t-mid) var(--ease-out)}
.segmented button{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:32px;
  border-radius:var(--r-pill);color:var(--ink-500);transition:color var(--t-fast) var(--ease)}
.segmented button[aria-pressed="true"]{color:var(--navy-800)}
.segmented svg{width:17px;height:17px}

.toolbar__meta{display:flex;align-items:center;gap:.75rem;justify-content:space-between;
  margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--hairline);
  font-size:var(--fs-xs);color:var(--ink-500);flex-wrap:wrap}
.toolbar__actions{display:flex;align-items:center;gap:.45rem;margin-left:auto;min-width:0}

/* Buscador anclado en la esquina inferior derecha de los filtros */
.tsearch{display:flex;align-items:center;gap:.3rem;min-width:0}
.tsearch__btn{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--ink-500);border:1px solid var(--hairline);background:#fff;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease)}
@media(hover:hover){
  .tsearch__btn:hover{background:var(--navy-900);color:#fff;border-color:transparent}
}
.tsearch.is-open .tsearch__btn{background:var(--navy-900);color:#fff;border-color:transparent}
.tsearch__btn svg{width:17px;height:17px;stroke-width:1.8}
.tsearch input{width:0;min-width:0;padding:0;border:1px solid transparent;background:transparent;
  font-size:var(--fs-xs);border-radius:var(--r-pill);opacity:0;order:-1;
  transition:width .42s var(--ease-out),padding .42s var(--ease-out),opacity .22s var(--ease),
             background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.tsearch.is-open input{width:clamp(160px,17vw,230px);padding:.44rem .9rem;opacity:1;
  background:rgba(11,36,92,.04);border-color:var(--hairline)}
.tsearch.is-open input:focus,.tsearch.is-open input:focus-visible{background:#fff;outline:none;
  border-color:rgba(242,103,34,.45);box-shadow:0 0 0 3px rgba(242,103,34,.14)}

.count b{color:var(--navy-800);font-weight:700;font-variant-numeric:tabular-nums}
.reset{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:650;color:var(--orange-cta-2);background:rgba(242,103,34,.12);
  transition:all var(--t-fast) var(--ease-out)}
.reset:hover{background:rgba(242,103,34,.18);transform:translateY(-1px)}
.reset svg{width:13px;height:13px;transition:transform var(--t-mid) var(--ease-spring)}
.reset:hover svg{transform:rotate(-180deg)}

/* ---------- 11. GRID / TARJETAS ---------- */
.results{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.results[data-view="list"]{grid-template-columns:1fr;gap:.85rem}

.card{
  --c:var(--navy-700);--c2:var(--navy-500);
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.78);border:1px solid var(--hairline);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-xs);contain:layout style;
  transition:transform .42s var(--ease-out),box-shadow .42s var(--ease),
             border-color .42s var(--ease);
  animation:cardIn .55s var(--ease-out) backwards;
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card::after{ /* glow que sigue al cursor */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--c) 7%,transparent),transparent 62%);
  transition:opacity var(--t-mid) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);
  border-color:color-mix(in srgb,var(--c) 20%,var(--hairline))}
.card:hover::after{opacity:1}
.card:focus-within{box-shadow:var(--sh-md),0 0 0 3px color-mix(in srgb,var(--c) 26%,transparent)}
.card__body{padding:1.15rem 1.15rem .9rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card__top{display:flex;align-items:flex-start;gap:.8rem}

.logo{width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-weight:640;font-size:.98rem;letter-spacing:-.03em;color:#fff;overflow:hidden;
  background:linear-gradient(145deg,var(--c2),var(--c));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .42s var(--ease-out)}
.card:hover .logo{transform:scale(1.04)}
.logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:5px}

.card__title{font-size:1rem;font-weight:670;letter-spacing:-.02em;line-height:1.35;
  color:var(--navy-900);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.card__tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.35rem}
/* Enlace extendido: toda la tarjeta es un objetivo táctil (WCAG 2.5.8) */
.card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card__link:focus-visible::after{outline:2.5px solid var(--orange-500);outline-offset:-3px}
.card__link:focus-visible{outline:none}
.card__foot{position:relative;z-index:2}
.tag{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:var(--r-pill);
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.005em;line-height:1.35;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  color:var(--ci,var(--c));background:color-mix(in srgb,var(--c) 10%,transparent)}
.tag--solid{color:#fff;background:var(--c)}

.card__serv{font-size:var(--fs-xs);color:var(--ink-600);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.card__foot{display:flex;gap:.5rem;align-items:center;padding:.75rem 1.15rem;
  border-top:1px solid var(--hairline);background:rgba(255,255,255,.35)}
.card__foot .btn{flex:1}
.iconbtn{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--ink-500);background:transparent;border:1px solid var(--hairline);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease)}
.iconbtn:hover{background:var(--navy-900);color:#fff;border-color:transparent}
.iconbtn svg{width:16px;height:16px;transition:transform var(--t-mid) var(--ease-out)}
.iconbtn:hover svg{transform:translateX(2px)}

/* Vista lista */
.results[data-view="list"] .card{flex-direction:row;align-items:stretch}
.results[data-view="list"] .card__body{flex-direction:row;align-items:center;gap:1rem;
  padding:1rem 1.15rem}
.results[data-view="list"] .card__top{flex:0 0 clamp(210px,26%,300px);align-items:center}
.results[data-view="list"] .card__title{-webkit-line-clamp:2}
.results[data-view="list"] .card__serv{-webkit-line-clamp:2;margin:0;border-left:1px solid var(--hairline);
  padding-left:1rem}
.results[data-view="list"] .card__foot{border:0;border-left:1px solid var(--hairline);
  background:none;flex:none;padding:1rem 1.15rem}
.results[data-view="list"] .card__foot .btn{flex:none}
@media(max-width:820px){
  /* Bajo este ancho la vista de lista ya se apila igual que la cuadrícula:
     el conmutador no aporta nada y se retira para dar el ancho a los filtros. */
  .segmented{display:none}
  .toolbar__row .chips{flex:1 1 100%}
  .results[data-view="list"] .card{flex-direction:column}
  .results[data-view="list"] .card__body{flex-direction:column;align-items:stretch}
  .results[data-view="list"] .card__top{flex:none}
  .results[data-view="list"] .card__serv{border-left:0;padding-left:0}
  .results[data-view="list"] .card__foot{border-left:0;border-top:1px solid var(--hairline);
    background:rgba(255,255,255,.35)}
}

/* Skeleton / vacío */
.skeleton{border-radius:var(--r-lg);height:232px;background:
  linear-gradient(100deg,rgba(255,255,255,.5) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.5) 70%)
  var(--ink-100);background-size:220% 100%;animation:shimmer 1.4s infinite linear}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-40% 0}}
.empty{grid-column:1/-1;text-align:center;padding:4rem 1.5rem;border-radius:var(--r-xl);
  background:var(--glass-bg-soft);border:1px dashed rgba(11,36,92,.15);
  animation:cardIn .45s var(--ease-out)}
.empty__ico{width:62px;height:62px;margin:0 auto 1.1rem;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy-600),var(--navy-900));color:#fff;box-shadow:var(--sh-md)}
.empty h3{font-size:var(--fs-h3);color:var(--navy-900);letter-spacing:-.02em;margin-bottom:.4rem}
.empty p{color:var(--ink-500);max-width:44ch;margin:0 auto 1.4rem}

.loadmore{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:2.2rem}
.loadmore small{font-size:var(--fs-xs);color:var(--ink-500)}

/* ---------- 12. MODAL / SHEET ---------- */
.overlay{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1.2rem;
  background:rgba(7,26,69,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease)}
.overlay.is-open{opacity:1;pointer-events:auto}
.modal{position:relative;width:min(560px,100%);max-height:min(88vh,880px);overflow-y:auto;
  border-radius:var(--r-2xl);background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--sh-xl);
  transform:translateY(18px) scale(.975);opacity:0;
  transition:transform var(--t-slow) var(--ease-out),opacity var(--t-mid) var(--ease);
  overscroll-behavior:contain}
.overlay.is-open .modal{transform:none;opacity:1}
.modal::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  background:linear-gradient(90deg,var(--orange-500),var(--navy-500))}
.modal__head{padding:1.9rem 1.9rem 0}
.modal__head h2{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--navy-900)}
.modal__head p{font-size:var(--fs-sm);color:var(--ink-500);margin-top:.3rem}
.modal__close{position:absolute;top:1.15rem;right:1.15rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-500);background:rgba(11,36,92,.06);
  transition:all var(--t-fast) var(--ease-spring)}
.modal__close:hover{background:rgba(11,36,92,.1);color:var(--navy-900)}
.modal__body{padding:1.1rem 1.9rem 1.9rem}
.sheet-grip{display:none}

/* Formulario */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-600);margin-bottom:.4rem}
.field .req{color:var(--orange-ink)}
.input,.select,.textarea{width:100%;padding:.8rem 1rem;border-radius:var(--r-md);
  border:1.5px solid rgba(11,36,92,.12);background:rgba(255,255,255,.75);font-size:var(--fs-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(11,36,92,.22)}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(242,103,34,.55);background:#fff;
  box-shadow:0 0 0 3px rgba(242,103,34,.12);outline:none}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.textarea{resize:vertical;min-height:104px;line-height:1.55}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.phone{display:flex;gap:.5rem}
.phone .select{width:118px;flex:none;padding-inline:.75rem 2rem;background-position:right .6rem center}
.field__err{display:block;font-size:var(--fs-2xs);color:#c0392f;margin-top:.35rem;font-weight:600;
  opacity:0;max-height:0;overflow:hidden;transition:all var(--t-fast) var(--ease)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{
  border-color:#e05545;box-shadow:0 0 0 4px rgba(224,85,69,.12);animation:shake .34s var(--ease)}
.field.has-error .field__err{opacity:1;max-height:40px}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}

/* Radios de urgencia */
.urgency{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.urgency input{position:absolute;opacity:0;width:0;height:0}
.urgency label{display:grid;place-items:center;padding:.7rem .4rem;border-radius:var(--r-md);
  border:1.5px solid rgba(11,36,92,.12);font-size:var(--fs-xs);font-weight:650;text-transform:none;
  letter-spacing:0;color:var(--ink-600);cursor:pointer;margin:0;
  transition:all var(--t-fast) var(--ease-out)}
.urgency label:hover{border-color:rgba(11,36,92,.25);transform:translateY(-1px)}
.urgency input:checked+label{border-color:var(--orange-cta);color:var(--orange-ink);
  background:rgba(242,103,34,.08);box-shadow:0 0 0 3px rgba(242,103,34,.1)}
.urgency input:focus-visible+label{outline:2.5px solid var(--orange-500);outline-offset:2px}

.form__note{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--fs-2xs);color:var(--ink-500);
  line-height:1.5;margin-top:1rem;padding:.7rem .85rem;border-radius:var(--r-md);
  background:rgba(42,85,176,.05)}
#conexion-empresa{margin-top:0;margin-bottom:1.05rem}
.field__hint{display:block;margin-top:.4rem;font-size:var(--fs-2xs);color:var(--ink-500);line-height:1.45}

/* Áreas de servicio seleccionadas */
.areas{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem}
.areas:empty{display:none}
.areas li{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .4rem .3rem .75rem;
  border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;color:var(--ci,var(--navy-800));
  background:color-mix(in srgb,var(--c,var(--navy-700)) 10%,transparent);
  animation:cardIn .3s var(--ease-out)}
.areas button{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:currentColor;opacity:.75;transition:opacity var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.areas button:hover{opacity:1;background:rgba(0,0,0,.09)}
.areas button svg{width:13px;height:13px;stroke-width:2}
.form__note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--navy-600)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Éxito */
.success{text-align:center;padding:1rem 0 .5rem;animation:cardIn .5s var(--ease-out)}
.success__ico{width:72px;height:72px;margin:0 auto 1.2rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#19c2a0,#0e9c93);color:#fff;box-shadow:0 10px 28px rgba(14,156,147,.35)}
.success__ico svg{width:34px;height:34px;stroke-dasharray:40;stroke-dashoffset:40;
  animation:draw .5s .18s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h3{font-size:1.35rem;letter-spacing:-.025em;color:var(--navy-900);margin-bottom:.45rem}
.success p{color:var(--ink-500);font-size:var(--fs-sm);max-width:40ch;margin:0 auto 1.6rem}

/* ---------- 13. SECCIONES / NÚCLEOS ---------- */
.section{padding-block:clamp(2rem,1.5rem + 2.2vw,3.4rem)}
.section__head{max-width:660px;margin:0 auto clamp(1.6rem,1.2rem + 1.6vw,2.4rem);text-align:center}
.section__head h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.032em;color:var(--navy-900);
  margin-block:.55rem .7rem;text-wrap:balance}
.section__head p{color:var(--ink-600);text-wrap:pretty}

/* Hero de páginas internas: fotografía tratada en duotono azul, no un degradado plano.
   La foto se funde en multiply con el azul de marca y sobre ella va un velo vertical
   que garantiza el contraste del texto. */
.pagehero{position:relative;isolation:isolate;padding:clamp(3.2rem,2.2rem + 4vw,5.4rem) 0;
  text-align:center;overflow:hidden;color:#fff;background-color:#061634;
  background-image:
    linear-gradient(176deg,rgba(6,22,52,.34) 0%,rgba(6,22,52,.6) 52%,rgba(6,22,52,.88) 100%),
    linear-gradient(103deg,rgba(9,30,74,.94) 0%,rgba(11,36,92,.62) 48%,rgba(23,56,128,.34) 100%),
    image-set(url("../img/hero-puerto.jpg") 1x);
  background-repeat:no-repeat;
  background-size:cover,cover,cover;
  background-position:center,center,center 38%;
  background-blend-mode:normal,multiply,normal}
/* viñeta + un punto de calor de marca en la esquina */
.pagehero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(64% 108% at 50% 52%,rgba(4,14,36,.5) 0%,rgba(4,14,36,.22) 58%,transparent 78%),
    radial-gradient(120% 90% at 50% 12%,transparent 34%,rgba(4,15,38,.5) 100%),
    radial-gradient(42% 62% at 88% 96%,rgba(242,103,34,.2),transparent 70%)}
.pagehero::after{content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
/* hilo de luz superior: separa el hero del encabezado sin una línea dura */
.pagehero .wrap{position:relative;z-index:1}
.pagehero--faq{background-position:center,center,center 58%}
@media(max-width:720px){
  .pagehero{background-image:
    linear-gradient(176deg,rgba(6,22,52,.38) 0%,rgba(6,22,52,.66) 52%,rgba(6,22,52,.95) 100%),
    linear-gradient(103deg,rgba(9,30,74,.94) 0%,rgba(11,36,92,.66) 48%,rgba(23,56,128,.38) 100%),
    image-set(url("../img/hero-puerto-sm.jpg") 1x)}
}
@media(prefers-reduced-data:reduce){
  .pagehero{background-image:
    linear-gradient(176deg,rgba(6,22,52,.5),rgba(6,22,52,.95)),
    linear-gradient(103deg,rgba(9,30,74,.96),rgba(23,56,128,.5))}
}
.pagehero h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.035em;margin-block:.6rem .8rem;
  text-wrap:balance}
.pagehero p{color:rgba(255,255,255,.86);max-width:56ch;margin-inline:auto;text-wrap:pretty;
  text-shadow:0 1px 14px rgba(4,14,36,.45)}
.pagehero h1{text-shadow:0 2px 24px rgba(4,14,36,.4)}
/* Sobre fotografía el naranja se aclara para mantener 4.5:1 con el cielo del fondo */
.pagehero .eyebrow{color:#ffa96b;text-shadow:0 1px 10px rgba(4,14,36,.5)}

.nucleos{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.nucleo{--c:var(--navy-700);--c2:var(--navy-500);
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;
  background:rgba(255,255,255,.78);border:1px solid var(--hairline);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-xs);
  transition:transform .42s var(--ease-out),box-shadow .42s var(--ease)}
.nucleo:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.nucleo__head{position:relative;padding:1.6rem 1.5rem 1.4rem;color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--c),var(--c2))}
.nucleo__head::after{content:"";position:absolute;inset:0;opacity:.28;
  background:radial-gradient(120% 100% at 85% -15%,rgba(255,255,255,.6),transparent 58%)}
.nucleo__ico{position:relative;z-index:1;width:42px;height:42px;border-radius:12px;display:grid;
  place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-bottom:.95rem;
  transition:transform .42s var(--ease-out)}
.nucleo:hover .nucleo__ico{transform:scale(1.05)}
.nucleo__ico svg{width:21px;height:21px}
.nucleo__head small{position:relative;z-index:1;display:block;font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.nucleo__head h3{position:relative;z-index:1;font-size:1.28rem;font-weight:700;letter-spacing:-.028em;
  line-height:1.2;margin-top:.15rem}
.nucleo__body{padding:1.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.nucleo__body>p{font-size:var(--fs-sm);color:var(--ink-600);line-height:1.6}
.nucleo__list{display:flex;flex-direction:column;gap:.5rem;font-size:var(--fs-xs);color:var(--ink-600)}
.nucleo__list li{display:flex;gap:.55rem;align-items:flex-start}
.nucleo__list svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--c)}
.nucleo__foot{margin-top:auto;padding-top:.3rem;display:flex;align-items:center;gap:.75rem}
.nucleo__count{font-size:var(--fs-2xs);font-weight:700;color:var(--ci,var(--c));padding:.3rem .7rem;
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--c) 11%,transparent);white-space:nowrap}
.nucleo .btn{--btn-bg:linear-gradient(135deg,var(--c),var(--c2));flex:1}

/* ---------- 14. FICHA DE EMPRESA ---------- */
.crumb{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);color:var(--ink-500);
  padding-block:1.4rem}
.crumb a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;min-height:26px;
  padding-block:.2rem;
  transition:color var(--t-fast) var(--ease)}
.crumb a:hover{color:var(--orange-ink)}
.crumb svg{width:14px;height:14px;transition:transform var(--t-fast) var(--ease-out)}
.crumb a:hover svg{transform:translateX(-3px)}

.profile{--c:var(--navy-700);--c2:var(--navy-500);
  position:relative;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--glass-bg-strong);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--sh-lg);animation:cardIn .55s var(--ease-out)}
.profile__banner{height:84px;position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--c),var(--c2))}
.profile__banner::after{content:"";position:absolute;inset:0;opacity:.32;
  background:radial-gradient(100% 160% at 82% -50%,rgba(255,255,255,.7),transparent 60%)}
.profile__in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.5rem;align-items:start;
  padding:0 clamp(1.3rem,1rem + 1.6vw,2.2rem) clamp(1.4rem,1.1rem + 1.2vw,1.8rem);
  margin-top:-38px;position:relative}
.profile__logo{grid-row:span 2;width:88px;height:88px;border-radius:24px;display:grid;place-items:center;
  font-size:1.9rem;font-weight:700;letter-spacing:-.04em;color:#fff;overflow:hidden;
  background:linear-gradient(145deg,var(--c2),var(--c));
  border:4px solid #fff;box-shadow:var(--sh-md)}
.profile__logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:8px}
.profile__id{padding-top:46px}
.profile h1{font-size:clamp(1.65rem,1.3rem + 1.5vw,2.4rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.12;color:var(--navy-900);text-wrap:balance}
.profile__legal{font-size:var(--fs-xs);color:var(--ink-500);margin-top:.25rem}
.profile__tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.profile__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;grid-column:2;margin-top:1rem;
  font-size:var(--fs-sm);color:var(--ink-600)}
@media(max-width:700px){
  .profile__in{grid-template-columns:1fr;gap:0}
  .profile__logo{grid-row:auto}
  .profile__id{padding-top:1rem}
  .profile__meta{grid-column:1;flex-direction:column;gap:.55rem}
}
.profile__meta li{display:flex;gap:.6rem;align-items:flex-start}
.profile__meta svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ink-400)}
.verified{display:inline-flex;align-items:center;gap:.4rem;font-weight:650;color:var(--navy-700)}
.verified svg{color:var(--navy-600)}

.cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:1.3rem;
  margin-top:1.3rem;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.panel{border-radius:var(--r-xl);padding:1.5rem;background:rgba(255,255,255,.8);
  border:1px solid var(--hairline);-webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);box-shadow:var(--sh-xs)}
.panel h2{font-size:1.18rem;font-weight:670;letter-spacing:-.025em;color:var(--navy-900);
  margin-bottom:1.1rem}
.servlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.servlist li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-700);
  padding:.55rem .7rem;border-radius:var(--r-sm);background:rgba(11,36,92,.03);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out)}
.servlist li:hover{background:rgba(11,36,92,.06);transform:translateX(3px)}
.servlist svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--orange-500)}
.panel__desc{font-size:var(--fs-sm);color:var(--ink-700);line-height:1.68}

.cta-card{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md)}
.cta-card__head{padding:1.25rem 1.4rem;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-600))}
.cta-card__head h2{font-size:1.08rem;font-weight:670;color:#fff;margin:0;letter-spacing:-.02em}
.cta-card__body{padding:1.3rem 1.4rem;background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);text-align:center}
.cta-card__body p{font-size:var(--fs-xs);color:var(--ink-500);margin-bottom:1rem}
.weblink{display:flex;align-items:center;gap:.6rem;margin-top:1rem;padding:.9rem 1.1rem;
  border-radius:var(--r-lg);background:var(--glass-bg-strong);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:var(--fs-sm);font-weight:600;color:var(--navy-800);box-shadow:var(--sh-sm);
  transition:all var(--t-fast) var(--ease-out)}
.weblink:hover{transform:translateY(-2px);box-shadow:var(--sh-md);color:var(--orange-ink)}
.weblink svg{width:17px;height:17px;flex:none}
.weblink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weblink svg:last-child{margin-left:auto;color:var(--ink-400)}

/* Relacionadas */
.related{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.related h2{font-size:var(--fs-h3);font-weight:680;letter-spacing:-.028em;color:var(--navy-900);
  margin-bottom:1.1rem}

/* ---------- 15. FAQ ---------- */
.faq{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:.75rem}
.acc{border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.8);
  border:1px solid var(--hairline);-webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);box-shadow:none;
  transition:box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-out)}
.acc:hover{box-shadow:var(--sh-md)}
.acc.is-open{box-shadow:var(--sh-md)}
.acc__btn{display:flex;align-items:center;gap:1rem;width:100%;padding:1.15rem 1.35rem;text-align:left;
  font-size:var(--fs-sm);font-weight:650;letter-spacing:-.015em;color:var(--navy-900);line-height:1.45}
.acc__btn:hover{color:var(--orange-ink)}
.acc__sign{width:26px;height:26px;border-radius:50%;flex:none;margin-left:auto;display:grid;
  place-items:center;color:var(--ink-400);border:1px solid var(--hairline);
  transition:transform .42s var(--ease-out),color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease)}
.acc.is-open .acc__sign{color:var(--orange-ink);border-color:rgba(242,103,34,.32);
  transform:rotate(45deg)}
.acc__sign svg{width:15px;height:15px}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--ease)}
.acc.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding:0 1.35rem 1.3rem;font-size:var(--fs-sm);color:var(--ink-600);line-height:1.7;
  max-width:70ch}
.acc__panel p+p{padding-top:0}

.faqnav{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}

/* ---------- 16. CTA BANDA ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-2xl);
  padding:clamp(2.2rem,1.6rem + 3vw,3.6rem) clamp(1.4rem,1rem + 2.5vw,3rem);text-align:center;color:#fff;
  background:linear-gradient(130deg,var(--navy-900),var(--navy-700) 55%,var(--navy-600));
  box-shadow:var(--sh-lg)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:radial-gradient(55% 90% at 12% 0%,rgba(42,85,176,.85),transparent 62%),
             radial-gradient(45% 80% at 88% 100%,rgba(242,103,34,.5),transparent 65%)}
.band h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.032em;margin-bottom:.7rem;
  text-wrap:balance}
.band p{color:rgba(255,255,255,.8);max-width:54ch;margin:0 auto 1.7rem;text-wrap:pretty}

/* ---------- 17. FOOTER ---------- */
.footer{margin-top:clamp(2rem,1.4rem + 2.4vw,3.2rem);color:rgba(255,255,255,.72);
  background:linear-gradient(180deg,var(--navy-900),#050f2c)}
.footer__grid{display:grid;gap:2.2rem;padding-block:clamp(2.5rem,2rem + 2vw,3.5rem);
  grid-template-columns:1.6fr 1fr 1fr}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr;gap:1.8rem}
  .footer__grid>div:first-child{grid-column:1/-1}}
.footer h3{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem}
.footer p{font-size:var(--fs-xs);line-height:1.7;max-width:34ch}
.footer .brand{color:#fff;margin-bottom:1rem}
.footer .brand__mark{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.footer .brand__txt small{color:rgba(255,255,255,.55)}
.footer ul{display:flex;flex-direction:column;gap:.2rem}
.footer li a,.footer li span{display:inline-flex;align-items:flex-start;gap:.55rem;font-size:var(--fs-xs);
  min-height:26px;padding-block:.28rem;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out)}
.footer li a:hover{color:#fff;transform:translateX(3px)}
.footer svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--orange-400)}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);padding-block:1.1rem;font-size:var(--fs-2xs);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(255,255,255,.5)}

/* ---------- 18. REVEAL ---------- */
/* Solo se oculta cuando hay JS: si el script falla, el contenido sigue visible. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 19. RESPONSIVE ---------- */
@media(max-width:860px){
  :root{--nav-h:62px}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:.2rem;margin:0;
    padding:.8rem var(--gutter) 1.2rem;background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
    border-bottom:1px solid rgba(11,36,92,.08);box-shadow:var(--sh-lg);
    transform:translateY(-118%);opacity:0;pointer-events:none;
    transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast) var(--ease)}
  .nav__links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__link{padding:.8rem 1rem;font-size:1rem;border-radius:var(--r-md)}
  .nav__link[aria-current="page"]::after{display:none}
  .nav__burger{display:flex}
  .nav__cta{display:none}
  .brand__txt small{display:none}
  .nav__in{grid-template-columns:auto 1fr auto}
  .nav__center{justify-content:flex-end}
  /* Al abrir la búsqueda el encabezado cede el espacio en flujo: sin posicionamiento
     absoluto no hay salto de scroll al enfocar el campo. */
  .nav.has-search-open .nav__center{display:none}
  .nav.has-search-open .brand__txt{display:none}
  .nav.has-search-open .nav__in{grid-template-columns:auto minmax(0,1fr)}
  .nav.has-search-open .nav__end{justify-self:stretch;width:100%}
  .nav__search.is-open{flex:1}
  /* En móvil el campo no anima su ancho: evita que el navegador reubique la página
     al enfocar mientras la transición aún está en curso. */
  .nav__search input{transition:opacity .2s var(--ease)}
  .nav__search.is-open input{width:100%;flex:1;min-width:0}
}
@media(max-width:620px){
  .stats{max-width:none;border-radius:var(--r-lg)}
  .stats div{padding:.8rem .4rem}
  .stats b{font-size:1.35rem}
  .stats span{font-size:.6rem;letter-spacing:.05em}
  .searchbar__kbd{display:none}
  .hero{padding-top:1.4rem}
  .hero h1{font-size:clamp(1.85rem,1.1rem + 3.4vw,2.3rem)}
  .hero__sub{font-size:.95rem;max-width:40ch}
  .grid2{grid-template-columns:1fr}
  .results{grid-template-columns:1fr}
  .toolbar{padding:.7rem;border-radius:var(--r-lg)}
  .toolbar__row{gap:.55rem}
  /* El buscador ocupa su propia fila para no competir con el contador */
  .toolbar__actions{width:100%;justify-content:flex-end}
  .tsearch.is-open{flex:1;min-width:0}
  .tsearch.is-open input{width:100%}
  .chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{scroll-snap-align:start}
  .searchbar{padding-left:.9rem}
  /* Modal como hoja inferior (iOS sheet) */
  .overlay{padding:0;align-items:flex-end}
  .modal{width:100%;max-height:92vh;border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
  .modal::before{border-radius:var(--r-2xl) var(--r-2xl) 0 0}
  .sheet-grip{display:block;width:38px;height:4px;border-radius:2px;background:var(--ink-300);
    margin:.75rem auto -.35rem}
  .modal__head{padding:1.2rem 1.35rem 0}
  .modal__head h2{font-size:1.3rem}
  .modal__close{top:.85rem;right:.9rem}
  .modal__body{padding:1.2rem 1.35rem 1.6rem}
  .profile__logo{width:78px;height:78px;border-radius:22px;font-size:1.5rem}
  .servlist{grid-template-columns:1fr}
}

/* ---------- 20. PREFERENCIAS DEL SISTEMA ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .ambient span{animation:none}
}
@media print{
  .nav,.toolbar,.overlay,.footer,.band,.ambient,.card__foot{display:none!important}
  body{background:#fff}
  .glass,.card,.panel,.profile{box-shadow:none;border:1px solid #ddd;background:#fff}
}
@media(prefers-contrast:more){
  :root{--glass-bg:rgba(255,255,255,.96);--glass-bg-strong:#fff;--ink-500:#4a5468}
  .card,.panel,.nucleo,.toolbar{border-color:rgba(11,36,92,.25)}
}

/* ---------- 21. PLUGIN WORDPRESS: añadidos ---------- */
/* Barra de administración de WordPress (solo para administradores conectados) */
.admin-bar .toolbar{top:44px}
@media(max-width:782px){.admin-bar .toolbar{top:58px}}
@media(max-width:600px){.admin-bar .toolbar{top:12px}}
/* Logotipo administrable: el alto se define en Contenido → Identidad (--logo-h). */
.brand__logo{display:block;height:var(--logo-h,40px);width:auto;max-width:min(260px,52vw);
  object-fit:contain;object-position:left center}
.footer .brand__logo{height:min(var(--logo-h,40px),48px);max-width:260px}
@media(max-width:860px){.brand__logo{height:min(var(--logo-h,40px),34px)}}

.form__error{margin:0 0 .9rem;padding:.7rem .9rem;border-radius:var(--r-md);font-size:var(--fs-xs);
  font-weight:600;line-height:1.5;color:#8f1d16;background:#fdecea;border:1px solid #f6c9c4}
.success__code{margin:-.6rem auto 1rem;font-size:var(--fs-sm);color:var(--ink-600)}
.success__code b{display:inline-block;margin-left:.35rem;padding:.2rem .6rem;border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--navy-900);background:rgba(11,36,92,.07)}
.success__mail{margin:-.4rem auto 1.4rem;font-size:var(--fs-xs);color:var(--ink-500)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  display:inline-block;margin-right:.55rem;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tag--star{gap:.25rem;color:#7a4b00;background:#fff3d6}
.tag--star svg{width:11px;height:11px;flex:none}
.card--destacado{border-color:rgba(201,140,11,.3);
  background:linear-gradient(180deg,rgba(255,248,232,.85),rgba(255,255,255,.78) 42%)}

/* Banners patrocinados */
.adslot{margin-bottom:1.3rem}
.adslot--wide{margin-block:.4rem 1.6rem}
.adslot--side{margin-bottom:0}
.ad{position:relative;display:flex;align-items:stretch;border-radius:var(--r-xl);overflow:hidden;
  background:rgba(255,255,255,.86);border:1px solid var(--hairline);box-shadow:var(--sh-xs);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  transition:transform .42s var(--ease-out),box-shadow .42s var(--ease)}
.ad:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.ad__media{position:relative;display:block;min-width:0;background:var(--ink-100)}
.ad__media picture,.ad__media img{display:block;width:100%;height:100%;object-fit:cover}
.ad__body{display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:1rem 1.2rem;min-width:0}
.ad__tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
.ad__tag--flot{position:absolute;top:10px;left:10px;padding:.22rem .6rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);box-shadow:var(--sh-xs)}
.ad__title{font-size:1rem;font-weight:670;letter-spacing:-.02em;line-height:1.3;color:var(--navy-900)}
.ad__text{font-size:var(--fs-xs);color:var(--ink-600);line-height:1.5}
.ad__cta{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:var(--fs-xs);
  font-weight:650;color:var(--orange-ink)}
.ad__cta svg{width:14px;height:14px;transition:transform var(--t-mid) var(--ease-out)}
.ad:hover .ad__cta svg{transform:translateX(3px)}
.ad--wide .ad__media{flex:1 1 60%;max-height:190px}
.ad--wide .ad__body{flex:0 0 clamp(220px,32%,360px)}
.ad--side{flex-direction:column;margin-top:1rem}
.ad--side .ad__media{aspect-ratio:16/10}
.ad--card{flex-direction:column;height:100%;border:0;border-radius:0;box-shadow:none;background:transparent}
.ad--card:hover{transform:none;box-shadow:none}
.ad--card .ad__media{aspect-ratio:16/9}
.ad--card .ad__body{flex:1;justify-content:flex-start}
.card--ad{display:block;padding:0}
.card--ad:hover{transform:translateY(-3px)}
.results[data-view="list"] .card--ad .ad--card{flex-direction:row}
.results[data-view="list"] .card--ad .ad__media{flex:0 0 clamp(200px,28%,320px);aspect-ratio:auto;max-height:150px}
@media(max-width:700px){
  .ad--wide{flex-direction:column}
  .ad--wide .ad__media{max-height:none;aspect-ratio:16/7}
  .ad--wide .ad__body{flex:none}
  .results[data-view="list"] .card--ad .ad--card{flex-direction:column}
}
@media print{.adslot,.card--ad{display:none!important}}