/* ── CHROME GLOBAL — cabecera, botón de WhatsApp y pie ──────────────────────
   Fuente única: partials/chrome.css. No editar dentro de las páginas.
   Pensado para pegarse tal cual en un snippet de WPCode.
   Solo depende de las variables de :root (--dark, --accent, --cream…). */

/* Fuera de pantalla hasta que recibe el foco. No se usa display:none porque eso
   lo saca tambien del orden de tabulacion y entonces no sirve para nada. */
.saltar{position:fixed;top:-100px;left:12px;z-index:300;
 background:var(--dark);color:var(--cream);padding:12px 20px;border-radius:0 0 10px 10px;
 font-size:14px;font-weight:600;transition:top .2s}
.saltar:focus{top:var(--tope,0px)}
header.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(236,229,219,.86);
 backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
 transition:background .35s,border-color .35s,color .35s}
header.nav.on-dark{background:rgba(26,8,4,.82);border-color:rgba(236,229,219,.14);color:var(--cream)}
/* La barra de administracion de WordPress es fija y va por encima de todo. La
   cabecera tambien es fija y arranca en top:0, asi que mientras estas logueado
   te tapa el logo y media navegacion — y la web parece rota aunque para un
   visitante este bien. Solo aplica con la barra puesta; en el sitio publico
   estas reglas no existen. */
/* Una variable, no un numero suelto en cada regla. Todo lo que se pega arriba
   —la cabecera y el indice de /services/— tiene que bajar lo mismo cuando esta
   la barra. Con el 32 escrito en cada sitio, el dia que aparezca un tercer
   elemento pegajoso alguien se olvida y queda medio tapado. Ya paso. */
:root{--tope:0px}
body.admin-bar{--tope:32px}
@media screen and (max-width:782px){body.admin-bar{--tope:46px}}
header.nav{top:var(--tope)}
/* Estas tres SOLO en escritorio.
   Son para los enlaces dentro de la barra, cuando la barra va sobre una seccion
   oscura. En movil los enlaces no estan en la barra: estan en una hoja que tiene
   su propio fondo. Sin este limite, la regla se colaba dentro de la hoja y
   mandaba sobre ella — asi es como los enlaces acabaron en crema sobre un panel
   crema, invisibles, y como la pagina actual dejaba de marcarse. Acotarlas es
   mas solido que subir la especificidad de la hoja para ganarles. */
@media(min-width:861px){
 header.nav.on-dark .nav-l a{color:rgba(236,229,219,.72)}
 header.nav.on-dark .nav-l a:hover{color:var(--cream)}
 header.nav.on-dark .nav-lang{border-color:rgba(236,229,219,.24)}
}
.nav-in{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,52px);height:70px;
 display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:.11em;text-transform:uppercase}
.logo i{color:var(--accent);font-style:normal}
.nav-l{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:500}
.nav-l a{color:var(--muted);transition:color .25s}
.nav-l a:hover{color:var(--dark)}
.nav-l a[aria-current]{color:var(--accent);font-weight:600}
.nav-lang{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
 padding:6px 12px;border:1px solid var(--line);border-radius:100px}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;
 /* La zona tactil, no el dibujo. Las tres rayas miden 28 px de alto y ese
    era todo el area pulsable del UNICO acceso al menu en movil, por debajo
    de los 44 que recomienda cualquier guia tactil. Se centran dentro de una
    caja de 44x44: el aspecto no cambia, el dedo acierta. */
 min-width:44px;min-height:44px;align-items:center;justify-content:center;
 margin-right:-6px}
.burger i{width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .2s}
.nav-l.open ~ .burger{color:var(--cream)}
.nav-l.open ~ .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-l.open ~ .burger i:nth-child(2){opacity:0}
.nav-l.open ~ .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── WhatsApp flotante ──────────────────────────────────────────────────
   En la paleta de Krelo, no en el verde de WhatsApp: el icono ya identifica
   el canal y el verde chirriaba con el crema y el rojo del resto. Píldora que
   se abre al pasar por encima, como el resto de transiciones del sitio. */
.wa{position:fixed;right:clamp(16px,2.4vw,26px);bottom:clamp(16px,2.4vw,26px);z-index:190;
 height:54px;padding:0 16px;border-radius:100px;background:var(--dark);color:var(--cream);
 display:inline-flex;align-items:center;gap:0;overflow:hidden;
 box-shadow:0 10px 28px rgba(26,8,4,.34),inset 0 0 0 1.5px rgba(236,229,219,.16);
 transition:gap .32s cubic-bezier(.3,.9,.3,1),background .28s,transform .28s,box-shadow .28s}
.wa svg{width:26px;height:26px;fill:currentColor;flex:none}
.wa b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.11em;
 text-transform:uppercase;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;
 transition:max-width .32s cubic-bezier(.3,.9,.3,1),opacity .22s}
.wa:hover,.wa:focus-visible{gap:10px;background:var(--accent);color:#fff;transform:translateY(-3px);
 box-shadow:0 14px 34px rgba(199,42,8,.34),inset 0 0 0 1.5px rgba(255,255,255,.2)}
.wa:hover b,.wa:focus-visible b{max-width:130px;opacity:1}
/* El pulso usa el acento de la marca, no el verde */
.wa::after{content:'';position:absolute;inset:0;border-radius:100px;border:1.5px solid var(--accent);
 pointer-events:none;animation:waPing 3s ease-out infinite}
@keyframes waPing{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
@media(hover:none){.wa{padding:0;width:54px;justify-content:center}}

/* ── Pie ── */
.fent{margin-top:clamp(26px,4vh,44px);padding-top:clamp(20px,3vh,30px);
 border-top:1px solid rgba(236,229,219,.12);max-width:78ch}
.fent p{font-size:13.5px;line-height:1.7}
.fent b{color:rgba(236,229,219,.86);font-weight:600}
.fent-z{margin-top:9px;font-size:12.5px;color:rgba(236,229,219,.42)}
footer{background:#120503;color:rgba(236,229,219,.58);padding:60px 0 40px;font-size:14px;position:relative;z-index:10}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
footer h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(236,229,219,.42);
 margin-bottom:14px;font-weight:600}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a{color:rgba(236,229,219,.58);transition:color .25s}
footer a:hover{color:var(--accent)}
.f-about{margin-top:13px;max-width:34ch;line-height:1.6}
.f-contact{margin-top:18px;gap:11px}
.f-contact li{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.f-contact a{font-weight:600;color:var(--cream)}
.f-contact a:hover{color:var(--accent)}
.f-tag{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 padding:3px 8px;border-radius:100px;background:rgba(236,229,219,.1);color:rgba(236,229,219,.5)}
/* El número de WhatsApp no se enseña: solo el botón, y se habla ahí.
   Mismo lenguaje que .btn-l del sitio: filete interior, sin relleno, y al
   pasar por encima se va al acento. */
.f-wa-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;
 box-shadow:inset 0 0 0 1.5px rgba(236,229,219,.28);color:var(--cream)!important;
 font-size:14px;font-weight:600;transition:box-shadow .28s,background .28s,transform .28s}
.f-wa-btn:hover{background:var(--accent);color:#fff!important;transform:translateY(-3px);
 box-shadow:inset 0 0 0 1.5px var(--accent)}
/* stroke:none explícito: el icono de WhatsApp es un glifo RELLENO, y donde
   convive con iconos de trazo (.ct-dir del contacto) heredaba su contorno
   naranja de 2px y se veía naranja en vez de crema. */
.f-wa-btn svg{width:17px;height:17px;fill:currentColor;stroke:none;flex:none}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(236,229,219,.12);
 display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
 font-size:12.5px;color:rgba(236,229,219,.36)}
.fbot-l{display:flex;gap:16px}

@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
/* ── CABECERA EN MOVIL ─────────────────────────────────────────────────────
   Antes era un desplegable corto y claro colgando de la barra, y tenia dos
   fallos:

   1. Los enlaces desaparecian en varias paginas. El panel es crema, pero sobre
      una seccion oscura mandaba `header.nav.on-dark .nav-l a`, que los pinta en
      crema — mas especifico que la regla del panel. Crema sobre crema. No era
      z-index: era especificidad, y solo pasaba en las paginas con hero oscuro.
   2. El boton de "Get free audit" estaba en display:none. La llamada a la
      accion desaparecia justo en el aparato desde el que entra casi todo el
      mundo.

   Ahora el panel es una hoja a pantalla completa CON FONDO PROPIO. Eso arregla
   lo primero de raiz: al no depender del color de la cabecera, no hay estado en
   el que el texto pueda quedarse del color del fondo. */
@media(max-width:860px){
 .nav-in{height:62px}

 /* El logotipo y la hamburguesa se quedan POR ENCIMA de la hoja: si no, la
    hoja los tapa (un elemento posicionado gana a uno estatico) y te quedas sin
    forma de cerrar el menu. */
 .logo,.burger{position:relative;z-index:2}

 .nav-l{position:fixed;inset:0;display:flex;background:var(--dark);color:var(--cream);
  flex-direction:column;align-items:stretch;gap:0;
  padding:calc(62px + 26px) 22px 118px;
  font-size:22px;font-weight:600;
  transform:translateY(-100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overscroll-behavior:contain}
 .nav-l.open{transform:translateY(0)}

 /* Area de toque de 56 px: por debajo de eso se falla el dedo. */
 .nav-l a{display:flex;align-items:center;min-height:56px;padding:6px 0;width:100%;
  border-bottom:1px solid rgba(236,229,219,.12);color:var(--cream);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;font-size:26px}
 .nav-l a:hover{color:var(--cream)}
 .nav-l a[aria-current]{color:#F0794F}

 /* El selector de idioma no es un enlace mas de la lista: es una pastilla. */
 .nav-l .nav-lang{align-self:flex-start;width:auto;min-height:0;margin-top:26px;
  padding:9px 15px;border:1px solid rgba(236,229,219,.28);border-radius:100px;
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(236,229,219,.72)}

 /* Con la hoja abierta, la barra se pone del color de la hoja: si no, queda una
    franja crema translucida encima de un fondo oscuro. */
 /* Y se le quita el desenfoque de fondo. No es cosmetico: backdrop-filter crea
    BLOQUE CONTENEDOR, asi que el position:fixed de la hoja se resolvia contra la
    cabecera en vez de contra la ventana y la hoja salia de 206 px en vez de
    cubrir la pantalla. Con la barra ya opaca, el desenfoque no pinta nada. */
 .nav.menu-abierto{background:var(--dark);border-bottom-color:rgba(236,229,219,.14);color:var(--cream);
  -webkit-backdrop-filter:none;backdrop-filter:none}
 .nav.menu-abierto .logo{color:var(--cream)}

 .burger{display:flex}
 /* Un enlace de 24 px de alto se falla con el dedo. El minimo comodo son 44. */
 .arrow{padding:10px 0;min-height:44px}
 /* Lo pone el JS al abrir: sin esto, la pagina de detras se arrastra. */
 html.menu-bloqueo,html.menu-bloqueo body{overflow:hidden}

 /* La llamada a la accion vuelve, al pie de la hoja y a todo el ancho. Va aqui
    y no en el HTML porque en escritorio vive en la barra: una sola marca en la
    plantilla, dos sitios distintos segun el ancho. */
 .nav .btn{display:none}
 .nav-l.open ~ .btn{display:inline-flex;position:fixed;left:22px;right:22px;bottom:28px;
  justify-content:center;font-size:16px;padding:18px 24px}
 .wa{width:50px;height:50px;bottom:16px;right:16px}
 .wa svg{width:26px;height:26px}
 .fgrid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.wa::after{animation:none}}