/* Atimi global footer: live icon band (shape-field + matter.js) and jelly logo.
   Vendor: Ivan Guaderrama Studio, Atimi home v500 (2026-09-27). Ported to WordPress 2026-09-28.
   Only change from the vendor CSS: the no-engine fallback image points at the existing footer still. */

/* =====================================================================
   SHAPE FIELD — CSS mínimo. Solo 3 reglas, y las 3 son necesarias.
   ===================================================================== */

/* 1) El contenedor. min-height es OBLIGATORIO: el campo toma su tamaño
      del contenedor, y si el tema no le da altura, mide 0 y no se ve nada. */
.shape-field{
  position:relative;
  overflow:hidden;
  min-height:min(88vh,780px);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  /* El contenido se empuja hacia ARRIBA para dejar libre la banda donde se
     apila el montón. Sin esto, en pantallas bajas (móvil) el botón principal
     queda ENTERRADO entre las formas. Es composición, no adorno: la llamada
     a la acción nunca puede competir con el efecto. */
  padding:clamp(60px,9vh,110px) 20px clamp(190px,32vh,300px);
  text-align:center;
  background:#050409;          /* cámbialo por el fondo de la marca */
  color:#f4f2ff;               /* y este por el color del texto */
}

/* 1-bis) EL COLOR DEL TEXTO HAY QUE IMPONERLO. El tema del cliente trae su
   propio color (pensado para fondo blanco) y con más especificidad que la
   herencia: sin esto el titular sale NEGRO SOBRE NEGRO. Comprobado en un
   simulacro de tema hostil. La clase se repite (.shape-field.shape-field)
   para ganar especificidad sin recurrir a !important.
   La TIPOGRAFÍA sí se hereda a propósito: debe ser la de la marca. */
.shape-field.shape-field h1, .shape-field.shape-field h2,
.shape-field.shape-field h3, .shape-field.shape-field p,
.shape-field.shape-field li, .shape-field.shape-field span{ color:inherit; }

/* 2) Todo lo que NO sea el canvas va por encima de él. Sin esto el texto
      queda enterrado bajo las formas. */
.shape-field > *:not(canvas){ position:relative; z-index:1; }

/* 3) Sombra en el texto que va encima. NO es cosmética: las formas claras
      pasan por detrás y a densidad alta se comen el contraste del texto.
      Esto se descubrió en una auditoría de accesibilidad, no en el diseño. */
.shape-field-ink{ text-shadow:0 1px 26px rgba(5,4,10,.92), 0 0 9px rgba(5,4,10,.82); }

/* 4) Botón de cortesía para el bloque pegable (bórralo si el tema ya trae uno). */
.shape-field-btn{
  display:inline-block; margin-top:22px; padding:14px 26px;
  border-radius:99px; background:#fff; color:#111;
  text-decoration:none; font-weight:600;
}

/* ── Banda de iconos ATIMI en el footer (integración de la banda v3 en la home) ── */
/* El footer de Atimi lleva content-visibility:auto: su contenido no se renderiza (mide 0×0)
   hasta acercarse al viewport. La banda necesita tamaño para construirse ANTES de que el
   usuario llegue (si no, llega vacía y las piezas caen delante de él). El footer es ligero:
   renderizarlo siempre no cuesta nada medible. */
.site-footer{ content-visibility:visible!important; contain-intrinsic-size:auto!important; }
.atimi-footer-band{ background:var(--color-dark-page-footer,#03101a); }
.shape-field{ padding:0; min-height:clamp(252px,25.2vw,396px);
  background:var(--color-dark-page-footer,#03101a); touch-action:pan-y pinch-zoom; }
/* 27/09: foto fija de la banda si su motor de física no llega a cargar (ver sinMotor()). */
.shape-field.sf-sin-motor{ background:var(--color-dark-page-footer,#03101a) url(/wp-content/uploads/2026/08/Footer-animation-still.webp) 50% 100%/cover no-repeat; }


/* Logo del footer de Atimi: se dobla como gelatina al pasar el ratón (Ivan Guaderrama Studio).
   El tamaño lo sigue poniendo .footer-logo de la página; esto solo le da el blanco del logo original.
   El SVG sigue en el HTML (buscadores, lectores de pantalla, sin JavaScript); el script lo oculta y
   dibuja encima una copia que se deforma. */
.atimi-nave{display:block;height:auto;aspect-ratio:900/373;color:#fff}

/* Hello theme pads .site-footer 10px each side at <=575px; the band stays edge to edge (Atimi). */
@media (max-width:575px){.site-footer:not(.dynamic-footer)>.atimi-footer-band{margin-left:-10px;margin-right:-10px}}