/* zocalo-forja.css — la publicidad de ForjaLabs al pie del sitio.

   La pieza la hizo ForjaLabs. Acá viene con un solo cambio respecto del
   original: las tipografías y el logo se sirven desde /assets en vez de ir
   embebidos en base64, porque el archivo suelto pesaba 336 KB y esto entra en
   cada página. El markup vive en parciales/zocalo-forja.blade.php.

   OJO AL EDITAR: los @keyframes son la mitad de la pieza. Sin ellos el CSS
   sigue siendo válido —las declaraciones `animation:` no fallan— pero nada se
   mueve y los elementos quedan en su estado inicial: el logo en opacity .12 y
   los mensajes invisibles. Pasó una vez.

   No usa JavaScript: el aspa es un <label> que marca un checkbox, y el
   checkbox oculta la banda con el selector de hermano adyacente. Por eso el
   <input> tiene que ir SIEMPRE justo antes del <aside>. */

@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'InterFL';src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'InterFL';src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* ── el zócalo ───────────────────────────────────────────────────── */
.fl-hueco{height:120px}
.fl-cerrar-in{position:fixed;width:1px;height:1px;opacity:0;bottom:0;left:0;margin:0}
.fl-cerrar-in:checked + .fl-zocalo{display:none}
.fl-zocalo{
  box-sizing:border-box;position:fixed;left:0;right:0;bottom:0;z-index:9999;height:120px;
  background:
    radial-gradient(120% 190% at 14% 118%, rgba(249,115,22,.22) 0%, rgba(249,115,22,.05) 42%, transparent 68%),
    #0A0A0A;
  box-shadow:0 -18px 44px rgba(0,0,0,.55);
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:34px;padding:0 26px 0 30px;
  font-family:'InterFL',system-ui,sans-serif;
  animation:fl-subir .6s cubic-bezier(.16,.84,.3,1) both;
  contain:paint;
}
@keyframes fl-subir{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* filo superior + chispa */
.fl-filo{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;pointer-events:none}
.fl-filo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,#F97316,transparent);
  transform:scaleX(0);transform-origin:left center;
  animation:fl-dibujar .6s cubic-bezier(.22,.7,.25,1) both;
}
@keyframes fl-dibujar{to{transform:scaleX(1)}}
.fl-chispa{
  position:absolute;top:0;left:0;width:22%;height:2px;
  background:linear-gradient(90deg,transparent,#FFC857 45%,#FFF3D6 50%,#FFC857 55%,transparent);
  opacity:0;transform:translateX(-130%);
  animation:fl-chispa 6s linear 1.8s infinite;
}
@keyframes fl-chispa{
  0%{opacity:0;transform:translateX(-130%)}
  1.5%{opacity:.95}
  13%{opacity:.95}
  15%{opacity:0;transform:translateX(440%)}
  100%{opacity:0;transform:translateX(440%)}
}
/* logo + encendido */
.fl-marca{position:relative;display:flex;align-items:center;justify-content:center;flex:none}
.fl-marca img{position:relative;z-index:1}
.fl-marca img.fl-lockup{display:block;width:222px;height:53px}
.fl-marca img.fl-iso{display:none;width:33px;height:42px}
.fl-halo{
  position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.55) 0%,rgba(249,115,22,.16) 38%,transparent 66%);
  opacity:0;transform:scale(.7);animation:fl-halo 1.05s cubic-bezier(.3,.8,.3,1) .55s both;
}
@keyframes fl-halo{
  0%{opacity:0;transform:scale(.7)}
  46%{opacity:.95;transform:scale(1.1)}
  100%{opacity:.4;transform:scale(1)}
}
.fl-marca img{opacity:.12;animation:fl-encender .55s cubic-bezier(.3,.8,.3,1) .6s both}
@keyframes fl-encender{to{opacity:1}}
/* textos */
.fl-texto{min-width:0;animation:fl-entrar .5s cubic-bezier(.2,.8,.25,1) 1.1s both}
@keyframes fl-entrar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fl-gancho{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:22px;line-height:1.1;letter-spacing:-.015em;color:#FFFFFF;margin:0 0 6px;
  white-space:nowrap;
}
.fl-rotador{position:relative;height:22px}
.fl-svc{
  position:absolute;left:0;top:0;width:100%;margin:0;
  font-size:15px;line-height:22px;color:#FCD9B6;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(12px);
  animation:fl-svc 17.5s cubic-bezier(.2,.8,.25,1) infinite both;
}
.fl-svc:nth-child(1){animation-delay:1.1s}
.fl-svc:nth-child(2){animation-delay:4.6s}
.fl-svc:nth-child(3){animation-delay:8.1s}
.fl-svc:nth-child(4){animation-delay:11.6s}
.fl-svc:nth-child(5){animation-delay:15.1s}
@keyframes fl-svc{
  0%{opacity:0;transform:translateY(12px)}
  2.6%{opacity:1;transform:translateY(0)}
  17.2%{opacity:1;transform:translateY(0)}
  20%{opacity:0;transform:translateY(-12px)}
  20.01%{opacity:0;transform:translateY(12px)}
  100%{opacity:0;transform:translateY(12px)}
}
/* CTA */
.fl-cta-zona{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none;
  animation:fl-entrar .5s cubic-bezier(.2,.8,.25,1) 1.25s both}
.fl-cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,#FFC857 0%,#F7931E 50%,#FF6B35 100%);
  color:#160A02;font-weight:600;font-size:15px;letter-spacing:.005em;white-space:nowrap;
  box-shadow:0 0 0 rgba(249,115,22,0);
  transition:transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease;
}
.fl-cta:hover,.fl-cta:focus-visible{transform:scale(1.03);box-shadow:0 6px 30px rgba(249,115,22,.5)}
.fl-cta:active{transform:scale(.99)}
.fl-cta:focus-visible{outline:2px solid #FFE3B0;outline-offset:3px}
.fl-cta span{font-size:16px;line-height:1;transform:translateY(-1px)}
.fl-aviso{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#9CA3AF;margin:0}
/* cerrar */
.fl-cerrar{
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#9CA3AF;cursor:pointer;font-size:15px;line-height:1;
  transition:color .2s ease, background-color .2s ease;
}
.fl-cerrar:hover{color:#F3F4F6;background:rgba(255,255,255,.07)}
.fl-cerrar-in:focus-visible + .fl-zocalo .fl-cerrar{outline:2px solid #FB923C;outline-offset:2px;color:#F3F4F6}
@media (max-width:1080px){
  .fl-zocalo{gap:18px;padding:0 20px 0 24px}
  .fl-marca img.fl-lockup{width:200px;height:48px}
  .fl-gancho{font-size:19px;white-space:normal}
  .fl-svc{font-size:14px}
  .fl-cta{padding:12px 18px;font-size:14px}
}
@media (max-width:900px){
  .fl-hueco{height:88px}
  .fl-zocalo{height:88px;gap:14px;padding:0 8px 0 14px;grid-template-columns:auto 1fr auto auto}
  .fl-marca img.fl-lockup{display:none}
  .fl-marca img.fl-iso{display:block}
  .fl-halo{width:96px;height:96px;margin:-48px 0 0 -48px}
  .fl-gancho{font-size:14px;margin:0 0 4px;white-space:normal}
  .fl-rotador{height:18px}
  .fl-svc{font-size:12px;line-height:18px}
  .fl-cta{padding:11px 15px;font-size:13px;gap:6px}
  .fl-cta span{display:none}
  .fl-aviso{font-size:8px;letter-spacing:.12em}
  .fl-cta-zona{gap:5px}
}
@media (max-width:600px){
  .fl-zocalo{
    grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
    row-gap:4px;column-gap:10px;padding:6px 8px 6px 10px;align-content:center;
    height:99px;
  }
  .fl-hueco{height:99px}
  .fl-marca{grid-column:1;grid-row:1 / span 2}
  .fl-texto{grid-column:2;grid-row:1}
  .fl-cerrar{grid-column:3;grid-row:1 / span 2;align-self:center}
  .fl-cta-zona{grid-column:2;grid-row:2;flex-direction:row;align-items:center;gap:10px}
  .fl-gancho{font-size:13px;margin:0 0 2px;white-space:nowrap}
  .fl-rotador{height:17px}
  .fl-svc{font-size:12px;line-height:17px}
  .fl-cta{padding:9px 14px;font-size:12px}
  .fl-aviso{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .fl-zocalo,.fl-filo::before,.fl-halo,.fl-marca img,.fl-texto,.fl-cta-zona{animation:none}
  .fl-filo::before{transform:none}
  .fl-marca img{opacity:1}
  .fl-halo{opacity:.4;transform:scale(1)}
  .fl-chispa{display:none}
  .fl-svc{animation:none;opacity:0;transform:none}
  .fl-svc:nth-child(1){opacity:1}
  .fl-cta{transition:none}
  .fl-cta:hover,.fl-cta:focus-visible{transform:none}
}

/* El logo pasó a <picture> para servir webp. El <picture> es una caja más
   dentro del flex de .fl-marca y las reglas de arriba apuntan al <img>: con
   display:contents la caja desaparece y el <img> vuelve a ser hijo directo. */
.fl-marca picture{display:contents}

/* ── Más presencia de marca ──────────────────────────────────────────
   Pedido después de verla en el sitio: el logo entraba como un adorno del
   mensaje. Ahora la marca ocupa su propia columna —logo más grande y el
   descriptor debajo— y una línea la separa del gancho, que es el recurso
   clásico para que dos discursos convivan sin pisarse.
   Va al final y como bloque aparte para que se pueda portar o quitar sin
   tocar el CSS original de la pieza. */
.fl-marca{flex-direction:column;gap:7px}
.fl-marca img.fl-lockup{width:268px;height:64px}
.fl-descriptor{
  margin:0;font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:#9CA3AF;white-space:nowrap;
}
.fl-texto{border-left:1px solid rgba(249,115,22,.3);padding-left:30px}
.fl-halo{width:190px;height:190px;margin:-95px 0 0 -95px}

@media (max-width:1080px){
  .fl-marca img.fl-lockup{width:236px;height:56px}
  .fl-descriptor{font-size:9px;letter-spacing:.14em}
  .fl-texto{padding-left:22px}
}
/* En teléfono manda el isotipo: el descriptor no entra y el separador aprieta. */
@media (max-width:900px){
  .fl-descriptor{display:none}
  .fl-marca{gap:0}
  .fl-texto{border-left:0;padding-left:0}
}

/* Entre 760 y 900 hay lugar de sobra para el logo entero: pasar al isotipo tan
   temprano le quitaba presencia a la marca justo en tablet. */
@media (max-width:900px) and (min-width:761px){
  .fl-marca img.fl-lockup{display:block;width:186px;height:44px}
  .fl-marca img.fl-iso{display:none}
}