/* ============================================================
 * _header-spark.css — header canónico + panel Servicios
 * Fuente: extraído literal de index.html (home), 2º <style> (958-1128)
 *   más los fragmentos del 1er <style> que ese bloque reemplaza/completa.
 * Requiere _sistema-spark.css cargado ANTES (usa var(--font),
 * var(--ease-out), etc. como fallback interno).
 * El puente de tokens en .hd-wrap (--fondo, --tinta, --carmin…)
 * permite reusar este header también en páginas v1, que usan
 * --blanco/--texto/--rojo como tokens propios.
 * ============================================================ */

/* ===== §1 header sticky + tema (fondo/tinta/logo-box) · index.html 179-196 ===== */
.hd-wrap{position:sticky;top:0;z-index:50}
header.site{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  height:56px;transition:background-color .3s var(--ease),color .3s var(--ease);
  background:var(--fondo);color:var(--tinta);
}
@media(min-width:980px){header.site{height:var(--header-h)}}
header.site.hd-quieto{background:var(--quieto)}
header.site.hd-oscuro{background:var(--oscuro-fondo);color:var(--oscuro-tinta)}
header.site.hd-carmin{background:var(--carmin);color:#fff}
/* marca sin caja (31-ago): isotipo en su color real, carmín */
.logo-box{
  width:48px;height:48px;color:var(--carmin);
  display:grid;place-items:center;transition:color .3s var(--ease);
}
header.site.hd-carmin .logo-box{color:#fff}
header.site.hd-carmin .pill{background:var(--fondo);color:var(--carmin)}
.logo-box svg{width:30px;height:30px}
/* ===== §2 logo-lock/logo-word + nav del header · index.html 257-266 ===== */
.logo-lock{display:flex;align-items:center;gap:.7rem}
.logo-word{font-family:var(--voz);font-weight:400;font-size:16px;letter-spacing:.18em;white-space:nowrap;color:var(--tinta);transition:color .3s var(--ease)}
header.site.hd-sobre .logo-word,header.site.hd-carmin .logo-word{color:#fff}
header.site.hd-oscuro .logo-word{color:var(--oscuro-tinta)}
@media(max-width:560px){.logo-word{display:none}}
header.site nav{display:flex;gap:2rem;justify-content:center}
header.site nav a{font-size:17px;transition:opacity .15s var(--ease)}
header.site nav a:hover{opacity:.72}
@media(max-width:767px){header.site nav{gap:1rem}header.site nav a.lnk{display:none}}
.hd-cta{justify-self:end}
/* ===== §3 hd-sobre: header transparente sobre el hero · index.html 341-342 ===== */
/* header sobre el hero: transparente + blanco */
header.site.hd-sobre{background:transparent;color:#fff;text-shadow:0 1px 12px rgba(10,6,5,.5)}
header.site.hd-sobre .logo-box{color:var(--carmin)}
/* ===== §4 ajustes móviles del header + label corto del CTA · index.html 344-355 ===== */
/* ajustes móviles del header */
@media(max-width:979px){
  .logo-box{width:40px;height:40px}
  .logo-box svg{width:26px;height:26px}
  header.site .pill{font-size:15px;padding:.5rem .9rem .5rem 1.2rem;min-height:44px;white-space:nowrap}
}
/* label del CTA del header: versión corta bajo 480px (nunca 2 líneas) */
.pill .lbl-s{display:none}
@media(max-width:479px){
  .pill .lbl-l{display:none}
  .pill .lbl-s{display:inline}
}
/* ===== §5 panel Servicios (triaje bajo el header) · index.html 357-389 ===== */
/* ---------- panel Servicios (triaje bajo el header) ---------- */
.svc-btn{
  background:none;border:none;cursor:pointer;color:inherit;font-family:var(--voz);
  font-size:17px;display:inline-flex;align-items:center;gap:.4rem;padding:0;
  transition:opacity .15s var(--ease);
}
.svc-btn:hover{opacity:.72}
.svc-btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.svc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.svc-panel{
  position:absolute;top:100%;left:0;right:0;z-index:49;
  background:var(--panel);border-bottom:1px solid var(--linea);
  opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
  max-height:calc(100vh - 56px);max-height:calc(100svh - 56px);overflow:auto;
}
@media(min-width:980px){.svc-panel{max-height:calc(100vh - 104px);max-height:calc(100svh - 104px)}}
.svc-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.25rem;padding-block:2.2rem;
}
@media(max-width:700px){.svc-grid{grid-template-columns:1fr;gap:.9rem;padding-block:1.4rem}}
.svc-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  padding:1.4rem;border:1px solid var(--linea);border-radius:var(--r-m);
  background:var(--fondo);cursor:pointer;text-align:left;color:var(--tinta);
  transition:border-color .3s var(--ease),transform .15s var(--ease);
}
.svc-card:hover{border-color:var(--carmin);transform:translateY(-2px)}
.svc-card svg{width:46px;height:46px;color:var(--carmin)}
.svc-card .sc-dolor{font-size:20px;letter-spacing:-.01em;line-height:1.3}
.svc-card .sc-nm{font-family:var(--dato);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-top:auto;padding-top:.4rem}
/* ===== §6 nav de anclas dentro del panel Servicios — solo móvil · index.html 893-903 ===== */
.svc-links{display:none}
@media(max-width:767px){
  .svc-links{display:block;border-top:1px solid var(--linea);margin-top:.4rem;padding:1rem 0 1.6rem}
  .svc-links .eyebrow{padding-inline:.2rem;margin-bottom:.3rem;display:block}
  .svc-links a{
    display:flex;justify-content:space-between;align-items:center;
    font-size:19px;padding:.85rem .2rem;min-height:48px;
    border-bottom:1px solid var(--linea);
  }
  .svc-links a:last-of-type{border-bottom:0}
  .svc-links a::after{content:"→";font-family:var(--dato);color:var(--suave)}
}

/* ===== §7 copia canónica completa (2º <style>, gana por cascada) · index.html 958-1128 ===== */
/* HEADER SPARK — CANÓNICO PARA TODO EL SITIO El panel de */

.hd-wrap{
  --fondo:          var(--blanco,   #f4f0ec);
  --tinta:          var(--texto,    #221713);
  --suave:          var(--texto-2,  #6b5f5a);
  --carmin:         var(--rojo,     #bd0e31);
  --carmin-activo:  var(--rojo-oscuro, #97081f);
  --quieto:         var(--tinte,    #eae5dd);
  --oscuro-fondo:   var(--negro,    #221713);
  --oscuro-tinta:   #f2ede8;
  /* 26-ago: antes era var(--font, ...) y el header heredaba la fuente de la página.
     El header es del sistema: pila fija, igual a _sistema-spark (28-ago: Questrial). */
  --voz:"Questrial","Century Gothic","Futura",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:           var(--ease-out, cubic-bezier(.4,0,.2,1));
  --header-h:       104px;
  --r-m:  16px;
  --r-s:  12px;
  --r-full: 999px;
}

.hd-wrap .xpad{ padding-inline:1.25rem; }
@media(min-width:768px){ .hd-wrap .xpad{ padding-inline:2.5rem; } }
@media(min-width:980px){ .hd-wrap .xpad{ padding-inline:4rem; } }
.hd-wrap .wrapmax{ max-width:1320px; margin-inline:auto; }

/* las páginas v1 subrayan todos los <a>; aquí no */
.hd-wrap a{ text-decoration:none; }
.hd-wrap .svc-card{ text-decoration:none; }

header.site{position:relative;padding-block:0;box-shadow:none;border:0}
header.site::before,header.site::after{content:none!important;display:none!important}

.hd-wrap header.site nav{
  position:static;inset:auto;z-index:auto;background:none;
  flex-direction:row;text-align:left;
  opacity:1;visibility:visible;transform:none;
}
.hd-wrap header.site nav a{opacity:1;transform:none;color:inherit}
.hd-wrap header.site nav a::after{content:none!important;display:none!important}

/* ---------- header sticky con cambio de tema ---------- */
.hd-wrap{position:sticky;top:0;z-index:50}
header.site{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  height:56px;transition:background-color .3s var(--ease),color .3s var(--ease);
  background:var(--fondo);color:var(--tinta);
}
@media(min-width:980px){header.site{height:var(--header-h)}}
header.site.hd-quieto{background:var(--quieto)}
header.site.hd-oscuro{background:var(--oscuro-fondo);color:var(--oscuro-tinta)}
header.site.hd-carmin{background:var(--carmin);color:#fff}
/* marca sin caja (31-ago): isotipo en su color real, carmín */
.logo-box{
  width:48px;height:48px;color:var(--carmin);
  display:grid;place-items:center;transition:color .3s var(--ease);
}
header.site.hd-carmin .logo-box{color:#fff}
header.site.hd-carmin .pill{background:var(--fondo);color:var(--carmin)}
.logo-box svg{width:30px;height:30px}
.logo-lock{display:flex;align-items:center;gap:.7rem}
.logo-word{font-family:var(--voz);font-weight:400;font-size:16px;letter-spacing:.18em;white-space:nowrap;color:var(--tinta);transition:color .3s var(--ease)}
header.site.hd-sobre .logo-word,header.site.hd-carmin .logo-word{color:#fff}
header.site.hd-oscuro .logo-word{color:var(--oscuro-tinta)}
@media(max-width:560px){.logo-word{display:none}}
header.site nav{display:flex;gap:2rem;justify-content:center}
header.site nav a{font-size:17px;transition:opacity .15s var(--ease)}
header.site nav a:hover{opacity:.72}
@media(max-width:767px){header.site nav{gap:1rem}header.site nav a.lnk{display:none}}
.hd-cta{justify-self:end}

/* pill button — escala de control Neko: 48px base, 58px en CTAs desktop */
.pill{
  display:inline-flex;align-items:center;gap:.55rem;border-radius:var(--r-full);
  padding:.5rem 1.15rem .5rem 1.6rem;font-size:17px;border:none;cursor:pointer;
  min-height:48px;
  background:var(--carmin);color:#fff;transition:background-color .3s var(--ease),transform .15s var(--ease);
}
@media(min-width:980px){
  .hero-acciones .pill{min-height:58px;padding:.6rem 1.35rem .6rem 1.9rem;font-size:18px}
}
.pill:hover{background:var(--carmin-activo)}
.pill:active{transform:scale(.98)}
.pill.oscura{background:var(--tinta);color:var(--fondo)}
.pill.oscura:hover{opacity:.88;background:var(--tinta)}
.tema-oscuro .pill.oscura{background:var(--oscuro-tinta);color:var(--oscuro-fondo)}
.pill svg{width:20px;height:20px;flex:none}

/* header sobre el hero: transparente + blanco */
.hero-sec{margin-top:-56px}
@media(min-width:980px){.hero-sec{margin-top:calc(-1 * var(--header-h))}}
header.site.hd-sobre{background:transparent;color:#fff;text-shadow:0 1px 12px rgba(10,6,5,.5)}
header.site.hd-sobre .logo-box{color:var(--carmin)}

/* ajustes móviles del header */
@media(max-width:979px){
  .logo-box{width:40px;height:40px}
  .logo-box svg{width:26px;height:26px}
  header.site .pill{font-size:15px;padding:.5rem .9rem .5rem 1.2rem;min-height:44px;white-space:nowrap}
}
/* label del CTA del header: versión corta bajo 480px (nunca 2 líneas) */
.pill .lbl-s{display:none}
@media(max-width:479px){
  .pill .lbl-l{display:none}
  .pill .lbl-s{display:inline}
}

/* ---------- panel Servicios (triaje bajo el header) ---------- */
.svc-btn{
  background:none;border:none;cursor:pointer;color:inherit;font-family:var(--voz);
  font-size:17px;display:inline-flex;align-items:center;gap:.4rem;padding:0;
  transition:opacity .15s var(--ease);
}
.svc-btn:hover{opacity:.72}
.svc-btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.svc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.svc-panel{
  position:absolute;top:100%;left:0;right:0;z-index:49;
  background:var(--panel);border-bottom:1px solid var(--linea);
  opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
  max-height:calc(100vh - 56px);max-height:calc(100svh - 56px);overflow:auto;
}
@media(min-width:980px){.svc-panel{max-height:calc(100vh - 104px);max-height:calc(100svh - 104px)}}
.svc-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.25rem;padding-block:2.2rem;
}
@media(max-width:700px){.svc-grid{grid-template-columns:1fr;gap:.9rem;padding-block:1.4rem}}
.svc-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  padding:1.4rem;border:1px solid var(--linea);border-radius:var(--r-m);
  background:var(--fondo);cursor:pointer;text-align:left;color:var(--tinta);
  transition:border-color .3s var(--ease),transform .15s var(--ease);
}
.svc-card:hover{border-color:var(--carmin);transform:translateY(-2px)}
.svc-card svg{width:46px;height:46px;color:var(--carmin)}
.svc-card .sc-dolor{font-size:20px;letter-spacing:-.01em;line-height:1.3}
.svc-card .sc-nm{font-family:var(--dato);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-top:auto;padding-top:.4rem}

/* nav de anclas dentro del panel Servicios — solo móvil (los .lnk del header se ocultan) */
.svc-links{display:none}
@media(max-width:767px){
  .svc-links{display:block;border-top:1px solid var(--linea);margin-top:.4rem;padding:1rem 0 1.6rem}
  .svc-links .eyebrow{padding-inline:.2rem;margin-bottom:.3rem;display:block}
  .svc-links a{
    display:flex;justify-content:space-between;align-items:center;
    font-size:19px;padding:.85rem .2rem;min-height:48px;
    border-bottom:1px solid var(--linea);
  }
  .svc-links a:last-of-type{border-bottom:0}
  .svc-links a::after{content:"→";font-family:var(--dato);color:var(--suave)}
}

.svc-card.pronto{
  cursor:default; opacity:.55;
  background:transparent;
  border-style:dashed;
}
.svc-card.pronto:hover{ border-color:var(--linea); transform:none; }
.svc-card.pronto svg{ color:var(--suave); }
.svc-card.pronto .sc-dolor{ color:var(--suave); }
.svc-card .sc-pronto{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--dato); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--suave);
  margin-top:auto; padding-top:.4rem;
}
.svc-card .sc-pronto::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--carmin); opacity:.55; flex:none;
}

/* ===== §8 panel Servicios en «vidrio» (19-ago-2026, pedido de Arturo) =====
   El panel deja de ser una placa opaca: fondo hueso translúcido + desenfoque
   de lo que hay detrás (sobre el hero oscuro se ve la foto difuminada; sobre
   una sección clara queda casi igual que antes). Las tarjetas activas son
   vidrio más claro con borde de luz; las «pronto» siguen punteadas y mudas.
   Sin soporte de backdrop-filter (Firefox viejo) se mantiene la placa
   opaca de arriba: nunca texto sobre foto sin fondo. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .svc-panel{
    background:rgba(253,251,248,.58);
    -webkit-backdrop-filter:blur(26px) saturate(1.35);
    backdrop-filter:blur(26px) saturate(1.35);
    border-bottom:1px solid rgba(255,255,255,.45);
    box-shadow:0 24px 60px -30px rgba(34,23,19,.28), inset 0 1px 0 rgba(255,255,255,.55);
  }
  .svc-panel::before{
    /* velo superior: el borde con el header no se ve cortado */
    content:"";position:absolute;inset:0 0 auto 0;height:72px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(253,251,248,.45),rgba(253,251,248,0));
  }
  .svc-card{
    background:rgba(255,255,255,.42);
    border-color:rgba(255,255,255,.65);
    box-shadow:0 10px 30px -24px rgba(34,23,19,.25), inset 0 1px 0 rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    transition:border-color .3s var(--ease),transform .3s cubic-bezier(.16,1,.3,1),background-color .3s var(--ease),box-shadow .3s var(--ease);
  }
  .svc-card:hover{background:rgba(255,255,255,.62);border-color:var(--carmin);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(34,23,19,.35)}
  .svc-card.pronto{background:rgba(255,255,255,.16);border-color:rgba(34,23,19,.16);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .svc-card.pronto:hover{background:rgba(255,255,255,.16);border-color:rgba(34,23,19,.16);transform:none}
  /* la apertura: de 8px arriba y un pelo más chico, con cola de asentamiento (§0.2) */
  .svc-panel{transform:translateY(-10px) scale(.995);transform-origin:50% 0}
  .svc-panel.open{transition:opacity .38s var(--ease),transform .6s cubic-bezier(.16,1,.3,1),visibility 0s}
}
@media(prefers-reduced-motion:reduce){ .svc-panel,.svc-card{transition:none!important} }

/* con el panel abierto, el contenido de la página se desenfoca suavemente
   detrás del vidrio (solo desktop: en móvil el panel vive dentro del menú).
   filter en <main> crea bloque contenedor para fixed: solo mientras está
   abierto y el panel tapa la zona superior; scrollear lo cierra (JS). */
@media(min-width:980px){
  main{transition:filter .4s var(--ease)}
  html.svc-abierto main{filter:blur(16px) saturate(1.08) brightness(.97)}
}
@media(prefers-reduced-motion:reduce){ main{transition:none} }

/* ===== §8 (19-ago · fase A) borde al scrollear + header alineado al contenedor ===== */
/* El header comparte fondo con la sección que tiene detrás; sin borde, el texto que pasa por
   debajo se corta sin transición. Con hd-scrolled (scrollY>8) aparece un filo de 1px. */
header.site.hd-scrolled{box-shadow:inset 0 -1px 0 rgba(34,23,19,.08)}
header.site.hd-scrolled.hd-oscuro,header.site.hd-scrolled.hd-carmin{box-shadow:inset 0 -1px 0 rgba(242,237,232,.14)}
header.site.hd-scrolled.hd-sobre{box-shadow:none}
/* El logo y el CTA arrancan en el mismo riel que el contenido (1320 centrado), no en el borde de la ventana. */
@media(min-width:980px){.hd-wrap header.site.xpad{padding-inline:max(4rem, calc((100% - 1320px) / 2 + 4rem))}}

/* ===== 26-ago · CANDADO DEL SISTEMA =====
   El pill del header no hereda la forma de botón de la página: en mom quedaba
   redondo total (999px) por no cargar _botones-spark.css. La fuente se fija
   arriba (--voz ya no difiere al --font de la página). */
header.site, header.site a, header.site button{font-family:var(--voz)}
header.site .pill{border-radius:20px}

/* ===== 31-ago · WHATSAPP FLOTANTE (transversal) =====
   Lo inyecta _header-spark.js en toda página que cargue el header; se omite si
   la página ya trae su propio .wsp-float (equipo mantiene el suyo con mensaje
   propio). En páginas con .barra-movil el JS agrega .wsp-float--cede-movil para
   no chocar con la barra inferior bajo 900px. z=55: sobre el contenido (49/50),
   bajo el menú móvil (60/65). */
.wsp-float{position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:55;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -6px rgb(0 0 0 / .35);transition:transform .3s var(--ease,ease)}
.wsp-float:hover{transform:scale(1.08)}
.wsp-float svg{width:30px;height:30px;fill:#fff}
@media(max-width:900px){
  .wsp-float{width:52px;height:52px}
  .wsp-float svg{width:28px;height:28px}
  .wsp-float--cede-movil{display:none}
}
@media(prefers-reduced-motion:reduce){.wsp-float{transition:none}.wsp-float:hover{transform:none}}