/* =============================================================================
   PortaFolio · Corporate Solutions — Hoja de estilos (styles.css)
   -----------------------------------------------------------------------------
   Complementa a Tailwind CSS (que se carga por CDN en el <head>). Aquí viven los
   estilos propios que Tailwind no cubre: tokens de marca, animaciones, la
   navegación responsive, el marquee de clientes, el formulario, el modal y las
   utilidades de aparición al hacer scroll.

   Los comentarios de bloque marcan cada seccion. Mapa general:
     1. Base            -> tipografía, colores, ::selection, :focus, textura de fondo
     2. Marca / logo    -> variable --logo-h (compartida por navbar y footer)
     3. Keyframes       -> animaciones reutilizables (fadeUp, drift, floaty, ...)
     4. Reveals         -> .fade-late / .reveal / .lm (aparición al hacer scroll)
     5. Botones         -> .btn-shine (efecto brillo)
     6. Navbar          -> hamburguesa + logo centrado <=960px; horizontal >960px
     7. Formulario      -> .field / .field-icon
     8. Preloader       -> #preloader y #progress (barra superior)
     9. Clientes        -> .logo-marquee (cinta de logos sin flechas)
    10. Efectos varios  -> tilt 3D, CTA sticky móvil, WhatsApp, modal
    11. Accesibilidad   -> prefers-reduced-motion (apaga el movimiento)
   ========================================================================== */

  body{font-family:'Inter',sans-serif;background:#FCF9F4;color:#4A423D;overflow-x:clip}
  h1,h2,h3,h4,h5,h6{font-family:'Jost',sans-serif;letter-spacing:-.015em}   /* tracking negativo: títulos más finos/premium */
  ::selection{background:#E87722;color:#fff}
  html{scroll-behavior:smooth;overflow-x:clip}
  section[id],header[id]{scroll-margin-top:92px} /* T3: el nav sticky no tapa títulos */
  :focus-visible{outline:2px solid #F6A14F;outline-offset:3px;border-radius:4px} /* T4 */
  /* Ancho del cuerpo/contenido: max-w-7xl = 80rem (1280px). No venía en base.css al quitar el build. */
  .max-w-7xl{max-width:80rem}

  body::after{content:'';position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

  @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  @keyframes doorPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}
  @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
  @keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

  .fade-late{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
  /* Titular del hero (elemento LCP): solo se desliza, sin partir de opacidad 0, para que cuente como pintado desde el primer frame */
  @keyframes riseUp{from{transform:translateY(30px)}to{transform:none}}
  .fade-late.rise-only{opacity:1;animation-name:riseUp}
  .grad-text{background:linear-gradient(100deg,#F6A14F,#E87722 55%,#B4490F);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* A1: line-mask reveal para H2 */
  .lm{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.2,.7,.2,1)}
  .lm.visible{clip-path:inset(0 0 0% 0)}

  .blob{position:absolute;border-radius:9999px;filter:blur(90px);pointer-events:none}
  .blob-1{animation:drift1 16s ease-in-out infinite}
  /* blob-2 queda estático (solo parallax sutil al hacer scroll): menos movimiento perpetuo compitiendo */

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal-left{opacity:0;transform:translateX(-26px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
  .reveal-right{opacity:0;transform:translateX(26px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
  .reveal-zoom{opacity:0;transform:scale(.92);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-zoom.visible{opacity:1;transform:none}

  /* Intro de "Nosotros" en 2 columnas: llena el ancho con buena medida de lectura */
  .intro-cols{columns:2;column-gap:2.75rem}
  .intro-cols p{break-inside:avoid;margin:0 0 1.25rem}
  .intro-cols p:last-child{margin-bottom:0}
  @media (max-width:768px){ .intro-cols{columns:1} }

  /* Animación de entrada del video (sube + escala + aparece) — Emil: ease-out, desde .96, no desde 0 */
  .reveal-video{opacity:0;transform:translateY(48px) scale(.96);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .reveal-video.visible{opacity:1;transform:none}

  /* Separación clara entre servicios (con línea sutil). Sustituye a space-y-* que no está en base.css */
  /* separacion entre servicios: 96px movil / 128px escritorio (antes 144 / 224) */
  .services-list > article + article{margin-top:3rem;padding-top:3rem;border-top:1px solid #EADFD0}
  @media (min-width:1024px){ .services-list > article + article{margin-top:4rem;padding-top:4rem} }

  /* Botón de play del video: anillo pulsante para invitar a reproducir (Emil: animación con propósito, 1ª vista) */
  .play-pulse{animation:playPulse 2.2s ease-out infinite}
  @keyframes playPulse{
    0%{box-shadow:0 0 40px -8px rgba(232,119,34,.45), 0 0 0 0 rgba(232,119,34,.55)}
    70%{box-shadow:0 0 40px -8px rgba(232,119,34,.45), 0 0 0 30px rgba(232,119,34,0)}
    100%{box-shadow:0 0 40px -8px rgba(232,119,34,.45), 0 0 0 0 rgba(232,119,34,0)}
  }

  /* Cuadrícula grande de logos de clientes (reemplaza al carrusel) */
  .logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:72rem;margin-inline:auto}
  @media (min-width:480px){ .logo-grid{grid-template-columns:repeat(3,1fr)} }
  @media (min-width:768px){ .logo-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem} }
  @media (min-width:1024px){ .logo-grid{grid-template-columns:repeat(5,1fr)} }
  .logo-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:.9rem 1.2rem;background:#fff;border:1px solid #EADFD0;border-radius:1rem;box-shadow:0 10px 40px -12px rgba(40,33,28,.10);opacity:0;transform:translateY(26px) scale(.94);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
  .logo-cell.in{opacity:1;transform:none}   /* estado final tras la cascada */
  .logo-cell img{max-height:4.6rem;max-width:88%;width:auto;object-fit:contain;transition:transform .45s cubic-bezier(.23,1,.32,1)}
  @media (hover:hover) and (pointer:fine){
    .logo-cell.in:hover{transform:translateY(-6px);box-shadow:0 24px 55px -18px rgba(40,33,28,.24);border-color:#e6cdae}
    .logo-cell.in:hover img{transform:scale(1.07)}
  }

  .btn-shine{position:relative;overflow:hidden;isolation:isolate;transition:transform .16s cubic-bezier(.23,1,.32,1)}
  .btn-shine:active{transform:scale(.97)}   /* feedback al presionar (Emil) */
  .btn-shine::before{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;transform:translateX(-160%) skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:transform .8s ease;z-index:-1}
  .btn-shine:hover::before{transform:translateX(320%) skewX(-20deg)}
  .btn-shine.sent{animation:pop .5s cubic-bezier(.2,1.4,.4,1);background:linear-gradient(to right,#B4490F,#B4490F)!important}

  #navbar.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px -12px rgba(40,33,28,.16)}

  /* ===== NAV responsive: hamburguesa + logo CENTRADO ≤960px; menú horizontal >960px ===== */
  :root{ --logo-h:2.5rem; }                               /* móvil (≤620) */
  @media (min-width:621px){ :root{ --logo-h:2.75rem; } }  /* tablet */
  @media (min-width:961px){ :root{ --logo-h:3.25rem; } }  /* escritorio */
  @media (min-width:1200px){ :root{ --logo-h:3.75rem; } } /* escritorio ancho */
  .brand-logo{ height:var(--logo-h); width:auto; max-width:none; display:block; }
  #navbar .brand-logo{ height:calc(var(--logo-h) + .5rem); }   /* logo del encabezado un poco más grande */
  #navbar .nav-inner{ position:relative; }
  #navbar .nav-inner > a{ flex:0 0 auto; }                /* el logo nunca se encoge ni se deforma */
  #nav-links{ display:flex; margin-left:2rem; }   /* aire entre el logo y los enlaces en escritorio */
  #mobile-menu-btn{ display:none; }
  @media (max-width:960px){
    #navbar .nav-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
    #navbar .nav-inner > a{ grid-column:2; justify-self:center; margin:0; }   /* logo centrado en móvil Y tablet */
    #navbar #nav-links{ display:none; }
    #navbar #mobile-menu-btn{ display:inline-flex; grid-column:3; justify-self:end; }
  }
  @media (min-width:961px){ #navbar #mobile-menu{ display:none !important; } }   /* dropdown nunca en escritorio */
  /* Menú móvil: abre/cierra con transición suave (evita el salto brusco) */
  #mobile-menu{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
    transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1),opacity .24s ease,visibility .3s}
  #mobile-menu > div{overflow:hidden;min-height:0}
  #mobile-menu.open{grid-template-rows:1fr;opacity:1;visibility:visible}
  .nav-link{position:relative}
  .nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,#F6A14F,#E87722);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
  .nav-link:hover,.nav-link.active{color:#B4490F}

  .field{width:100%;padding:.8rem 1rem .8rem 2.9rem;border-radius:.8rem;border:2px solid #EADFD0;background:#FCF9F4;transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;outline:none}
  .field:focus{border-color:#E87722;background:#fff;box-shadow:0 0 0 4px rgba(232,119,34,.14)}
  .field-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#B4490F;opacity:.55}

  #preloader{position:fixed;inset:0;z-index:100;background:#1A1512;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
  #preloader.done{opacity:0;visibility:hidden}
  #preloader svg{animation:doorPulse 1.1s ease-in-out infinite}

  #progress{position:fixed;top:0;left:0;height:3px;z-index:90;background:linear-gradient(90deg,#F6A14F,#E87722,#B4490F);width:0%;box-shadow:0 0 12px rgba(232,119,34,.6)}

  /* Marquee de logos de clientes (sin flechas ni números) */
  .logo-marquee{display:flex;flex-direction:column;gap:1.1rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .logo-marquee-row{overflow:hidden}
  .logo-track{display:flex;width:max-content;will-change:transform}
  .logo-track.run{animation:marqueeL var(--dur,60s) linear infinite}
  .logo-track.run.rev{animation-name:marqueeR}
  @keyframes marqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
  .mq-dup{display:contents}
  .logo-chip{flex:0 0 auto;width:clamp(8.5rem,40vw,11.5rem);height:6.25rem;margin-right:1.1rem;display:flex;align-items:center;justify-content:center;
    padding:1.1rem 1.4rem;background:#fff;border:1px solid #EADFD0;border-radius:1rem;box-shadow:0 10px 40px -12px rgba(40,33,28,.14)}
  .logo-chip img{max-height:3.4rem;max-width:82%;width:auto;object-fit:contain}
  @media (hover:hover) and (pointer:fine){
    .logo-chip{transition:transform .45s cubic-bezier(.23,1,.32,1),box-shadow .45s ease}
    .logo-chip:hover{transform:translateY(-4px);box-shadow:0 24px 60px -18px rgba(19,41,61,.25)}
  }
  @media (prefers-reduced-motion: reduce){
    .logo-track{animation:none!important;flex-wrap:wrap;justify-content:center;width:auto}
    .logo-marquee-row{overflow:visible}
    .mq-dup{display:none}
    .logo-chip{margin-bottom:1.1rem}
  }

  /* Tilt 3D (D5) */
  .tilt{transform-style:preserve-3d;will-change:transform}

  /* A6: sticky CTA móvil */
  #mobileCta{transform:translateY(120%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  #mobileCta.show{transform:translateY(0)}

  /* A7: WhatsApp pulse */
  .wa-pulse{animation:waPulse 2.2s infinite}

  /* Indicador de scroll del hero: rebota suave y se desvanece al bajar */
  #heroScroll{animation:heroBounce 2s ease-in-out infinite;transition:opacity .4s ease}
  #heroScroll.gone{opacity:0;pointer-events:none}
  @keyframes heroBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

  /* Modal artículos (T2) */
  #articleModal{transition:opacity .35s ease}
  #articleModal.open{opacity:1}
  #articleModal .modal-card{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  #articleModal.open .modal-card{transform:translateY(0) scale(1)}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}   /* sin desplazamiento suave si el usuario pide reducir movimiento */
    *,*::before,*::after{animation:none!important;transition:none!important}
    .fade-late,.reveal,.reveal-left,.reveal-right,.reveal-zoom,.reveal-video,.logo-cell,.lm{opacity:1!important;transform:none!important;clip-path:none!important}
  }

  /* ===== Páginas de artículo (/articulos/) ===== */
  .article-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-line)}
  #readingBar{position:fixed;top:0;left:0;height:3px;z-index:60;width:0%;background:linear-gradient(90deg,#F6A14F,#E87722,#B4490F);box-shadow:0 0 12px rgba(232,119,34,.6)}
  .article-hero-img{aspect-ratio:16/9;object-fit:cover;width:100%}
  .article-prose{max-width:44rem;margin-inline:auto;font-size:1.075rem;line-height:1.8}
  .article-prose > p{margin:0 0 1.35rem}
  .article-prose h2{font-family:'Jost',sans-serif;color:var(--color-navy);font-size:1.55rem;line-height:1.25;margin:2.5rem 0 1rem;letter-spacing:-.015em}
  .article-prose h3{font-family:'Jost',sans-serif;color:var(--color-navy);font-size:1.2rem;margin:2rem 0 .6rem}
  .article-prose ul,.article-prose ol{margin:0 0 1.35rem;padding-left:1.3rem}
  .article-prose li{margin:.45rem 0}
  .article-prose blockquote{margin:1.75rem 0;padding:1rem 1.25rem;border-left:2px solid var(--color-brand);background:var(--color-sand);border-radius:.6rem;font-family:'Fraunces',serif;font-style:italic}
  .article-prose a{color:var(--color-rust);text-decoration:underline;text-underline-offset:2px}

  /* ═══════════ ACCESO AL DIAGNÓSTICO ═══════════
     A · El enlace del menú pasa a botón con contorno: hoy se lee igual
         que "Equipo" o "Alianzas" y nada indica que ahí hay una
         herramienta. No usa relleno sólido para no competir con
         "Agendar Consulta", que sigue siendo el único botón lleno.
     ──────────────────────────────────────────── */
  .nav-diag{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.45rem 1.05rem; border-radius:999px;
    border:1.5px solid var(--color-rust); color:var(--color-rust);
    font-weight:600; line-height:1.2;
    transition:background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
  }
  .nav-diag:hover{ background:var(--color-rust); color:#fff; transform:translateY(-1px); }
  .nav-diag i{ font-size:.88em; }

  /* versión del menú móvil: ocupa el ancho y no lleva el borde inferior de lista */
  .nav-diag-movil{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.6rem 1rem; border-radius:.6rem; margin-top:.25rem;
    border:1.5px solid var(--color-rust); color:var(--color-rust); font-weight:600;
  }

  /* ─────────────────────────────────────────────
     B · Tira del diagnóstico al cierre de "Familias Empresarias".
         No es un enlace suelto: muestra los siete pilares que el
         visitante acaba de leer, y ofrece medirlos. El activo visual
         (las letras PROTEGE) hace el trabajo que un texto no haría.
     ──────────────────────────────────────────── */
  /* Dos filas deliberadas en vez de dejar que el flex envuelva solo:
     la columna del servicio mide ~470px, y ahi letras+texto+flecha en una
     sola linea no caben. Asi el resultado es el mismo a cualquier ancho. */
  .diag-tira{
    display:grid; grid-template-columns:1fr auto; gap:.9rem 1rem;
    grid-template-areas:"letras letras" "texto flecha";
    align-items:center;
    margin-top:1.6rem; padding:1.15rem 1.25rem;
    background:var(--color-sand); border:1px solid #e5d6c1; border-radius:.9rem;
    text-decoration:none; color:inherit;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
  }
  .diag-tira:hover{
    border-color:var(--color-amber); transform:translateY(-2px);
    box-shadow:0 1px 2px rgba(26,21,18,.04), 0 14px 30px -20px rgba(26,21,18,.45);
  }
  .diag-tira .letras{ grid-area:letras; display:flex; gap:3px; }
  .diag-tira .letras span{
    width:1.5rem; height:1.5rem; border-radius:.4rem; color:#fff;
    font-family:'Jost',sans-serif; font-weight:600; font-size:.74rem;
    display:flex; align-items:center; justify-content:center;
  }
  .diag-tira .texto{ grid-area:texto; min-width:0; }
  .diag-tira .texto strong{
    display:block; font-weight:600; color:var(--color-navy);
    font-size:1rem; line-height:1.35; margin-bottom:.15rem;
  }
  .diag-tira .texto span{ font-size:.85rem; color:var(--color-steel); }
  .diag-tira .flecha{
    grid-area:flecha; width:2.2rem; height:2.2rem; border-radius:999px;
    background:var(--color-rust); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:.82rem;
    transition:transform .2s cubic-bezier(.16,1,.3,1);
  }
  .diag-tira:hover .flecha{ transform:translateX(3px); }

  @media (max-width:560px){
    .diag-tira{ padding:1rem; gap:.8rem .85rem; }
    .diag-tira .letras span{ width:1.35rem; height:1.35rem; font-size:.68rem; }
    .diag-tira .texto strong{ font-size:.95rem; }
  }

  /* ═══════════ RITMO VERTICAL ═══════════
     Una sola escala para todo el sitio (base 4px) con roles semanticos,
     en vez de py-24/py-28/py-32 y mb-12/14/16 mezclados.

     Antes: cada seccion llevaba 128px arriba Y abajo, asi que dos
     secciones claras seguidas sumaban 256px de crema vacia (192px en
     un telefono de 844px de alto).
     ──────────────────────────────────────── */
  :root{
    --sec-y:4rem;      /* padding de seccion            64 / 80 / 96   */
    --sec-cab:2.5rem;  /* cabecera de seccion -> contenido 40 / 48 / 56 */
    --sec-rel:1.5rem;  /* seccion que continua el tema de la anterior   */
  }
  @media (min-width:768px){ :root{ --sec-y:5rem; --sec-cab:3rem; --sec-rel:2rem; } }
  @media (min-width:1024px){ :root{ --sec-y:6rem; --sec-cab:3.5rem; --sec-rel:2.5rem; } }

  .seccion{ padding-block:var(--sec-y); }
  /* Alianzas prolonga Equipo ("complementados con alianzas estrategicas")
     sobre el mismo fondo: se acerca para leerse como un mismo bloque. */
  .seccion--continua{ padding-top:var(--sec-rel); }
  .seccion-cab{ text-align:center; margin-bottom:var(--sec-cab); }
  .seccion-pie{ text-align:center; margin-top:3rem; }

  /* ═══════════ EQUIPO · 5 personas ═══════════
     3 + 2 centradas en escritorio, 2 + 2 + 1 centradas en tablet, una
     columna en movil. La rejilla de 4 columnas dejaba una tarjeta huerfana.
     ──────────────────────────────────────── */
  .equipo-grid{
    display:flex; flex-wrap:wrap; justify-content:center; gap:2rem;
    max-width:70rem; margin-inline:auto;
  }
  .equipo-grid > *{ flex:1 1 100%; max-width:26rem; }
  @media (min-width:640px){
    .equipo-grid > *{ flex:0 1 calc((100% - 2rem) / 2); max-width:none; }
  }
  @media (min-width:1024px){
    .equipo-grid > *{ flex:0 1 calc((100% - 4rem) / 3); }
  }

  /* ═══════════ ARTÍCULO DESTACADO ═══════════
     Antes iba en dos columnas y se estiraba hasta la altura de las dos
     tarjetas vecinas: ~460px vacios bajo el resumen y una columna de texto
     tan estrecha que la fila de metadatos se partia en tres. Apilado, la
     imagen absorbe la altura sobrante y el texto usa todo el ancho.
     ──────────────────────────────────────── */
  .art-destacado-img{ flex:1 1 auto; min-height:13rem; }
  @media (min-width:768px){ .art-destacado-img{ min-height:16rem; } }

  /* Metadatos de articulo: si no caben, la fila envuelve por elementos
     completos ("4 min" baja entero) en vez de partir cada uno en dos lineas. */
  .art-meta{ flex-wrap:wrap; row-gap:.5rem; }
  .art-meta > *{ white-space:nowrap; }