/* =====================================================================
   FusanyaPro — estilos extra compartidos (31 oct 2026)
   1) Imágenes de contexto: hero del home, tarjetas de servicio y
      figuras de las landings.
   2) Panel del CONTACTO INTERNO (ver sales-call.js).
   Se carga DESPUÉS del <style> propio de cada página; todas las clases
   son propias (fp-/hero-media/card-media/showcase) para no pisar nada.
   ===================================================================== */

/* ---------- Botones <button> con la clase .btn de la casa ---------- */
button.btn { font:inherit; cursor:pointer; border:none; }
a.contact-card { cursor:pointer; }

/* ---------- Home: hero con imagen (rejilla en escritorio) ---------- */
@media (min-width:880px){
  .hero-grid {
    display:grid; grid-template-columns:1.02fr .98fr; gap:44px;
    align-items:center; width:100%; max-width:1120px; text-align:left;
  }
  /* En el DOM la imagen va PRIMERA (así en móvil queda arriba, como
     pidió Julio 31 oct 08:47); en escritorio la colocación es
     explícita: texto a la izquierda, imagen a la derecha. */
  .hero-copy { grid-column:1; grid-row:1; }
  .hero-media { grid-column:2; grid-row:1; }
  .hero-copy { display:flex; flex-direction:column; align-items:flex-start; }
  .hero-copy .lead { margin-left:0; margin-right:0; }
  .hero-copy .ctas { justify-content:flex-start; }
  .hero-copy .kicker { margin-top:0; }
}
.hero-media {
  margin:0; width:100%; max-width:560px;
  border-radius:28px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
@media (min-width:880px){ .hero-media { margin:0; max-width:none; } }
/* ÚNICA imagen del hero: altura ACOTADA por la pantalla (jamás crece en
   flujo ni empuja el contenido). Fluida (2 nov 2026): una sola recta
   continua con svh anclada en los tamaños que antes calibraban las
   bandas (720px de alto → ~115px; 844px → ~219px), con suelo de 88px:
   la imagen escala con la pantalla y NUNCA desaparece por un peldaño. */
.hero-media img {
  display:block; width:100%; height:clamp(88px, 80svh - 490px, 235px);
  object-fit:cover; object-position:50% 40%;
}
@media (min-width:880px){ .hero-media img { height:auto; aspect-ratio:16/10.5; } }

/* ---------- Tarjetas de servicio del home con foto ---------- */
.card .card-media {
  margin:-36px -28px 22px; height:clamp(120px, 20svh, 168px); overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.card .card-media img { display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- Figura principal de las landings (bajo el hero) ---------- */
.showcase { margin:0; }
.showcase img {
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:28px; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
@media (min-width:860px){ .showcase img { aspect-ratio:16/7.2; } }
.showcase figcaption {
  margin-top:14px; text-align:center; color:var(--muted);
  font-size:.98rem; line-height:1.55;
}

/* ---------- Panel de contacto interno ---------- */
.fpcall {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fpcall[hidden] { display:none; }
@media (min-width:720px){ .fpcall { align-items:center; padding:24px; } }
.fpcall-card {
  position:relative; width:100%; max-width:420px;
  background:linear-gradient(180deg, #15151d, #0b0b10);
  border:1px solid rgba(248,145,22,.35);
  border-radius:28px 28px 0 0; padding:30px 26px 28px; text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:fpcallIn .25s ease;
}
@media (min-width:720px){ .fpcall-card { border-radius:28px; } }
@keyframes fpcallIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.fpcall-x {
  position:absolute; top:12px; right:14px; width:36px; height:36px;
  border-radius:50%; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:#fff; font-size:1.15rem;
  cursor:pointer; line-height:1; font-family:inherit;
}
.fpcall-logo {
  width:64px; height:64px; border-radius:50%;
  box-shadow:0 12px 34px rgba(248,145,22,.3);
}
.fpcall-card.ringing .fpcall-logo { animation:fpcallPulse 1.6s ease-in-out infinite; }
@keyframes fpcallPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(248,145,22,.45); }
  50% { box-shadow:0 0 0 16px rgba(248,145,22,0); }
}
.fpcall-brand {
  margin-top:14px; font-size:.74rem; font-weight:800;
  letter-spacing:.26em; text-transform:uppercase; color:var(--orange2);
}
.fpcall-peer { margin-top:10px; font-size:1.45rem; font-weight:800; letter-spacing:-.015em; }
.fpcall-status { margin-top:6px; color:var(--muted); font-size:1rem; line-height:1.5; }
.fpcall-timer {
  margin-top:4px; font-size:1.05rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.fpcall-note { margin-top:10px; color:var(--muted); font-size:.92rem; line-height:1.55; }
/* Selector de oficina por estado (política de llamadas, regla 1) */
.fpcall-offices { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fpcall-offices[hidden] { display:none; }
.fpcall-office-btn {
  padding:16px 14px; border-radius:18px; cursor:pointer;
  border:1px solid rgba(248,145,22,.4); color:#fff; font:inherit;
  font-weight:800; font-size:1.05rem; letter-spacing:-.01em;
  background:linear-gradient(160deg, rgba(246,76,19,.22), rgba(248,145,22,.07));
  transition:transform .2s ease, box-shadow .2s ease;
}
.fpcall-office-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(246,76,19,.25); }
.fpcall-actions { margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.fpcall-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07);
  color:#fff; font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
}
.fpcall-btn svg { width:18px; height:18px; fill:#fff; flex:0 0 auto; }
.fpcall-btn.end { background:#d92c2c; border-color:#d92c2c; }
.fpcall-btn.end svg { transform:rotate(135deg); }
.fpcall-btn[aria-pressed="true"] {
  background:linear-gradient(90deg, var(--orange), var(--orange2));
  border-color:transparent;
}
.fpcall-fallback {
  margin-top:18px; border-top:1px solid rgba(255,255,255,.09);
  padding-top:16px; color:var(--muted); font-size:.95rem; line-height:1.55;
}
.fpcall-fallback[hidden] { display:none; }
.fpcall-mail {
  display:inline-block; margin-top:10px; padding:12px 24px; border-radius:999px;
  background:linear-gradient(90deg, var(--orange), var(--orange2));
  color:#fff; font-weight:700; text-decoration:none;
}

/* =====================================================================
   Refinamientos 31 oct 2026 (segunda ronda)
   3) Imagen de marca del hero (reemplaza al isotipo repetido: el
      isotipo se queda SOLO en el header).
   4) Panel de contacto: vistas (elegir oficina con BUSCADOR → vista
      de la oficina Llamar/Escribir → chat / llamada con altavoz).
   ===================================================================== */

/* ---------- Home: hero con UNA sola imagen acotada (.hero-media) ----
   El isotipo vive SOLO en el header. La foto ancha que iba dentro del
   copy (.hero-brand) se eliminó: su altura en flujo (~165–195px) se
   sumaba a la figura y sacaba el hero de la primera pantalla. */

/* ---------- Panel: vistas ---------- */
.fpcall-view[hidden], .fpcall-actions[hidden] { display:none; }

/* ---------- Selector de oficina con buscador ---------- */
.fpcall-search {
  width:100%; margin-top:18px; padding:13px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-size:1rem; outline:none;
}
.fpcall-search::placeholder { color:#8a8a93; }
.fpcall-search:focus { border-color:rgba(248,145,22,.65); box-shadow:0 0 0 3px rgba(248,145,22,.18); }
.fpcall-offices {
  margin-top:12px; display:flex; flex-direction:column; gap:10px;
  max-height:236px; overflow-y:auto; padding:2px;
}
.fpcall-office-btn { width:100%; text-align:left; position:relative; padding-right:38px; }
.fpcall-office-name { display:block; }
.fpcall-office-num {
  display:block; margin-top:3px; font-size:.88rem; font-weight:700;
  color:var(--orange2); letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.fpcall-office-btn::after {
  content:"›"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--orange2); font-size:1.3rem; line-height:1;
}
.fpcall-office-btn[hidden] { display:none; }
.fpcall-noresults { margin-top:12px; color:var(--muted); font-size:.92rem; line-height:1.5; }
.fpcall-noresults[hidden] { display:none; }

/* ---------- Vista de la oficina: Llamar / Escribir ---------- */
.fpcall-contact-actions { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fpcall-bigbtn {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 10px 18px; border-radius:20px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#fff; font:inherit; font-weight:800; font-size:1.05rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fpcall-bigbtn svg { width:30px; height:30px; fill:var(--orange2); }
.fpcall-bigbtn.call {
  border-color:rgba(248,145,22,.45);
  background:linear-gradient(160deg, rgba(246,76,19,.25), rgba(248,145,22,.08));
}
.fpcall-bigbtn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.fpcall-back {
  margin-top:14px; padding:9px 10px; background:none; border:none; cursor:pointer;
  color:var(--orange2); font:inherit; font-weight:700; font-size:.95rem;
}

/* ---------- Chat con la oficina ---------- */
.fpcall-thread {
  margin-top:16px; max-height:248px; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px; text-align:left; padding:2px;
}
.fpmsg {
  max-width:85%; padding:11px 14px; border-radius:18px;
  font-size:.95rem; line-height:1.45; overflow-wrap:anywhere;
}
.fpmsg.me {
  align-self:flex-end; color:#fff; border-bottom-right-radius:6px;
  background:linear-gradient(135deg, var(--orange), var(--orange2));
}
.fpmsg.them {
  align-self:flex-start; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10); border-bottom-left-radius:6px;
}
.fpmsg.sys {
  align-self:center; max-width:96%; background:none; padding:2px 6px;
  color:var(--muted); font-size:.87rem; line-height:1.5; text-align:center;
}
.fpmsg .tag { display:block; margin-top:5px; font-size:.72rem; font-weight:700; opacity:.85; }
.fpcall-chat-status { margin-top:12px; color:var(--muted); font-size:.86rem; line-height:1.5; text-align:left; }
.fpcall-chat-form { margin-top:10px; display:flex; gap:10px; }
.fpcall-chat-input {
  flex:1; min-width:0; padding:13px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-size:1rem; outline:none;
}
.fpcall-chat-input::placeholder { color:#8a8a93; }
.fpcall-chat-input:focus { border-color:rgba(248,145,22,.65); }
.fpcall-chat-send {
  flex:0 0 auto; padding:13px 20px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(90deg, var(--orange), var(--orange2));
  color:#fff; font:inherit; font-weight:800; font-size:.95rem;
  display:inline-flex; align-items:center; gap:8px;
}
.fpcall-chat-send svg { width:17px; height:17px; fill:#fff; }

/* =====================================================================
   Panel: ancho EXACTO de pantalla — jamás scroll lateral (Julio,
   31 oct 08:47: «al abrir el panel la pantalla hace un poco de
   scroll horizontal»). Regla sellada: cero scroll horizontal en
   móvil. Blindaje por construcción, verificado por auditoría de
   anchos a 390px y 360px:
   - La capa fija recorta en X y solo admite gesto vertical.
   - La tarjeta no puede pasar del viewport (min(420px, 100%)) y
     ningún hijo puede forzar ancho: min-width:0 (los hijos flex/
     grid no se niegan a encoger) y max-width:100% en todo el
     interior; los textos largos parten (overflow-wrap:anywhere).
   - Con el panel abierto el documento queda bloqueado también
     desde <html> vía :has() — el JS bloquea <body>, y en iOS eso
     solo no basta: <html> seguía pudiendo desplazarse en X.
   - El input del chat va en 1rem (16px): por debajo, iOS hace
     zoom al enfocarlo y la pantalla se desplaza de lado.
   ===================================================================== */
.fpcall { overflow-x:clip; touch-action:pan-y; }
.fpcall-card { max-width:min(420px, 100%); min-width:0; overflow-x:clip; }
.fpcall-card * { min-width:0; max-width:100%; }
.fpcall-peer, .fpcall-status, .fpcall-note,
.fpcall-office-name, .fpcall-office-num { overflow-wrap:anywhere; }
html:has(.fpcall:not([hidden])) { overflow:hidden; }

/* =====================================================================
   Modo de prueba de llamada (Julio, 31 oct 09:09): etiqueta discreta,
   campo de dígitos, teclado compacto (3 columnas, cabe a 390px sin
   scroll lateral), opciones 1/2 de acción real y grabadora de buzón.
   La interfaz la construye sales-call.js; aquí solo vive el estilo.
   ===================================================================== */
.fpcall-test { margin-top:16px; }
.fpcall-test[hidden], .fpcall-keypad[hidden], .fpcall-dialed[hidden],
.fpcall-choices[hidden], .fpcall-rec[hidden], .fpcall-vmaudio[hidden] { display:none; }
.fpcall-testtag {
  display:inline-block; padding:4px 12px; border-radius:999px;
  border:1px solid rgba(248,145,22,.45); color:var(--orange2);
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.fpcall-dialed {
  margin-top:12px; min-height:1.5em; font-size:1.2rem; font-weight:800;
  letter-spacing:.06em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.fpcall-keypad {
  margin:10px auto 0; display:grid; grid-template-columns:repeat(3, 1fr);
  gap:8px; max-width:216px; width:100%;
}
.fpcall-key {
  padding:11px 0; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-weight:800; font-size:1.05rem; line-height:1;
}
.fpcall-key:active { background:rgba(248,145,22,.3); border-color:rgba(248,145,22,.6); }
.fpcall-choices { margin-top:16px; display:grid; gap:10px; }
.fpcall-choice {
  padding:16px 14px; border-radius:16px; cursor:pointer; width:100%;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#fff; font:inherit; font-weight:800; font-size:1.02rem;
}
.fpcall-choice.voice {
  border-color:rgba(248,145,22,.5);
  background:linear-gradient(160deg, rgba(246,76,19,.28), rgba(248,145,22,.09));
}
.fpcall-rec {
  margin-top:16px; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap;
}
.fpcall-recdot {
  width:12px; height:12px; border-radius:50%; background:#ff453a; flex:0 0 auto;
  animation:fpcallRec 1.1s ease-in-out infinite;
}
@keyframes fpcallRec { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.fpcall-rectime { font-weight:700; font-variant-numeric:tabular-nums; }
.fpcall-vmaudio { margin-top:14px; width:100%; }

/* =====================================================================
   Header de ESCRITORIO (Julio, 31 oct 10:37 + corrección del mismo
   día): afuera quedan SOLO la marca y los productos (Signage/Web/
   Social) más el botón ☰. Dentro del menú hamburguesa de escritorio
   (.desk-menu) viven: idioma, redes sociales, Contacto y el Acceso
   al cliente (es una página para vender: el acceso se lo entrega la
   empresa al hacerse cliente). TODO esto aplica solo ≥880px; en
   móvil el header queda exactamente como estaba.
   ===================================================================== */
.desk-toggle { display:none; }
.desk-menu { display:none; }
@media (max-width:879px){
  .desk-toggle, .desk-menu { display:none !important; }
}
@media (min-width:880px){
  header.site .bar > .lang-wrap,
  header.site .bar > a.icon,
  header.site .bar > a.loginbtn { display:none !important; }
  .desk-toggle {
    display:flex; width:44px; height:44px; flex:0 0 44px;
    border:1px solid rgba(255,255,255,.16); border-radius:999px;
    background:rgba(255,255,255,.06); cursor:pointer;
    padding:0 10px; flex-direction:column; align-items:flex-end; justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .desk-toggle span {
    display:block; height:2px; border-radius:999px; background:#fff;
    transition:width .28s ease, transform .28s ease, opacity .2s ease;
  }
  .desk-toggle span + span { margin-top:5px; }
  .desk-toggle span:nth-child(1){ width:24px; }
  .desk-toggle span:nth-child(2){ width:16px; background:var(--orange2); }
  .desk-toggle span:nth-child(3){ width:20px; }
  .desk-toggle.open span:nth-child(1){ width:24px; transform:translateY(7px) rotate(45deg); }
  .desk-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(.25); }
  .desk-toggle.open span:nth-child(3){ width:24px; transform:translateY(-7px) rotate(-45deg); }
  /* Panel flotante RECORTADO A SU ANCHO (dirección final de Julio,
     31 oct 11:24): el menú sigue siendo desplegable, pero sale del
     flujo del header (position:absolute) y se achica al ancho que su
     contenido lleva — 320px, compacto, alineado a la derecha bajo el
     ☰. Así el header NUNCA se estira a lo ancho (ese lado vacío que
     se veía raro y «tapaba» era el fondo del header crecido) y dentro
     del panel los ítems ocupan todo el ancho: sin franja vacía a
     ningún lado. Nada empuja el contenido de la página. El
     max-height + overflow quedan solo de salvavidas en pantallas muy
     bajas, con la barra fina y casi invisible. */
  .desk-menu {
    display:none; position:absolute; top:calc(100% + 8px); right:24px;
    width:320px; max-width:calc(100vw - 48px);
    margin:0; padding:12px;
    border:1px solid rgba(255,255,255,.11); border-radius:24px;
    background:rgba(10,10,15,.96); box-shadow:0 28px 70px rgba(0,0,0,.55);
    backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
    transform-origin:top right;
    max-height:calc(100dvh - 96px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent;
  }
  .desk-menu::-webkit-scrollbar { width:6px; }
  .desk-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:99px; }
  .desk-menu::-webkit-scrollbar-track { background:transparent; }
  .desk-menu.open { display:block; animation:deskMenuIn .24s ease; }
  .desk-menu a.menu-link, .desk-menu button.menu-link {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    width:100%; padding:16px 18px; border-radius:16px;
    background:none; border:none; cursor:pointer; text-align:left;
    font:inherit; font-size:1.05rem; font-weight:700; color:#fff; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .desk-menu a.menu-link:active, .desk-menu a.menu-link:hover,
  .desk-menu button.menu-link:active, .desk-menu button.menu-link:hover { background:rgba(255,255,255,.07); }
  .desk-menu .menu-link .arrow { color:var(--orange2); font-size:1.15rem; line-height:1; }
  .desk-menu .menu-sep { height:1px; background:rgba(255,255,255,.08); margin:8px 6px; }
  .desk-menu .menu-label {
    padding:12px 18px 8px; font-size:.7rem; font-weight:800;
    letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  }
  .desk-menu .menu-login {
    display:flex; align-items:center; justify-content:center;
    margin:12px 2px 2px; padding:16px 18px; border-radius:999px;
    background:var(--grad); color:#fff; text-decoration:none; font-weight:800;
    box-shadow:0 12px 32px rgba(246,76,19,.28);
  }
  /* Idioma como UNA fila más del menú (nada de píldora ancha vacía):
     bandera + nombre + chevron, plana como Contactar/Instagram, a
     todo el ancho del panel. Su desplegable de banderas se integra
     plano, sin caja ni borde propios. (El markup trae la bandera en
     vez del globo solo dentro de #deskMenu; el móvil no se toca.) */
  header.site .desk-menu .lang-globe {
    width:100%; height:auto; min-height:0; padding:16px 18px;
    border:none; border-radius:16px; background:transparent;
    justify-content:flex-start; gap:11px;
  }
  header.site .desk-menu .lang-globe:hover { background:rgba(255,255,255,.07); }
  header.site .desk-menu .lang-globe img.flag { width:24px; height:18px; }
  header.site .desk-menu .lang-globe .lang-cur { font-size:1.05rem; font-weight:700; }
  header.site .desk-menu .lang-dd {
    position:static; min-width:0; margin-top:2px; padding:2px 0 0;
    background:transparent; border:none; border-radius:0; box-shadow:none;
  }
  header.site .desk-menu .lang-dd .lang-opt {
    min-height:0; padding:14px 18px; border-radius:16px;
    font-size:1.02rem; font-weight:700;
  }
}
@keyframes deskMenuIn {
  from { opacity:0; transform:translateY(-10px) scale(.985); }
  to { opacity:1; transform:none; }
}

/* =====================================================================
   Header de escritorio A TODO ANCHO + servicios destacados (Julio,
   31 oct 10:47; CORRECCIONES 10:53 y 11:14): la barra va de orilla a
   orilla — marca pegada a la izquierda, padding lateral modesto de
   24px — y los TRES servicios (Signage/Web/Social) se agrupan a la
   DERECHA, pegados al botón ☰, en el flujo (la marca queda sola a
   la izquierda). Tratamiento FINAL CONFIRMADO (Julio, 31 oct
   11:40): botones SIN RELLENO — interior transparente/oscuro, sin
   degradado (la versión de solo borde de las 11:14 era la base
   correcta; la vuelta al degradado quedó anulada: «lo pusiste de
   nuevo como estaba») — y el borde de esa versión, que era el
   naranja oscuro #f64c13, va un poco MÁS CLARO: #f89116
   (brand-light). Solo se aclaró el borde; nada más cambia en los
   botones. TODO solo ≥880px; el bloque móvil queda intacto.
   ===================================================================== */
@media (min-width:880px){
  header.site .bar {
    max-width:none; margin:0; padding:12px 24px; position:relative;
  }
  header.site nav.main {
    position:static; transform:none;
    order:8; margin-left:0; gap:10px; align-items:center;
  }
  header.site .desk-toggle { order:9; }
  header.site nav.main a {
    display:inline-flex; align-items:center;
    padding:11px 22px; border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1.5px solid #f89116;
    color:#fff; font-size:1rem; font-weight:800; letter-spacing:.01em;
    box-shadow:none;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  header.site nav.main a:hover {
    background:var(--orange); color:#fff; transform:translateY(-1px); filter:none;
    box-shadow:0 10px 26px rgba(246,76,19,.35);
  }
}

/* =====================================================================
   Sin barra de desplazamiento visible en TODO el sitio (Julio, 31 oct):
   la página sigue desplazándose igual; solo se oculta la barra.
   (login/dashboard no cargan esta hoja: llevan la misma regla inline.)
   ===================================================================== */
html, body { scrollbar-width:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; }

/* =====================================================================
   Campos de formulario a 16px en pantallas táctiles (Julio, 31 oct
   2026, del reel de @4tucode): iOS Safari hace zoom solo al enfocar
   cualquier input/select/textarea con font-size menor de 16px y la
   página salta. Los campos propios ya iban en 1rem; esta red lo
   garantiza en TODOS. El zoom de la página NO se bloquea jamás
   (maximum-scale/user-scalable prohibidos: accesibilidad).
   (login/dashboard no cargan esta hoja: llevan la misma regla inline.)
   ===================================================================== */
@media (pointer:coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select, textarea { font-size:16px !important; }
}