/* ==========================================================================
   Vértice Commerce 2 — core/recipes/hero-split.css (receta v2.1)

   COMPONE: hero de dos columnas — texto (kicker/título/bajada/CTAs) a un
   lado, imagen única al otro. Mobile: flujo de bloque (texto arriba, imagen
   abajo); ≥880px: dos columnas centradas.

   ESTA RECETA ES EL DEFAULT DE FÁBRICA Y **NO DECLARA NINGUNA REGLA** a
   propósito (decisión de compat de la Ola B, fix hero-split.css:35): en
   v2.0 no existía NINGÚN CSS core para .vc-hero--* — la composición del
   hero siempre fue responsabilidad de la piel (la piel wireframe pinta solo
   un borde en .vc-hero__media y el hero de fábrica renderiza APILADO en
   todos los anchos). Cualquier regla activa acá violaría §2.7 / AC#1 ("con
   config de fábrica: render idéntico a v2.0"): cambiaría el hero del
   wireframe en desktop y el de cualquier proyecto v2.0 actualizado al motor
   v2.1 sin declarar nada nuevo (una piel que ya compone con grid pero sin
   gap recibiría el gap nuevo y se le correría el layout). El archivo existe
   para que el contrato de enqueue sea uniforme (handle vc-recipe-hero-split,
   igual que card-clasica.css y pdp-clasica.css, también sin reglas) y para
   documentar el punto de partida mecánico del split (bloque de referencia
   comentado abajo).

   ACTIVACIÓN: project-config.php → 'hero' => 'split' (default de fábrica)
   ⇒ clase .vc-hero--split en el DOM; la COMPOSICIÓN la hace la piel:
   copiá el bloque de referencia a design/home.css y ajustá tracks/gap a la
   dirección (50/50 es solo el arranque mecánico; 60/40, 40/60… es decisión
   de piel).
   DOM: template-parts/home/hero.php — SIN ramas: DOM v2.0 intacto (§2.7).

   SELECTORES QUE EL DOM EXPONE A LA PIEL:
   - .vc-hero--split                  → wrapper (la piel arma la grilla)
   - .vc-hero--split .vc-hero__content / .vc-hero__media / .vc-hero__img
   - .vc-hero--split.vc-hero--media-left → imagen a la izquierda en desktop
     (variante 'media-left' de project-config.php 'secciones', o arg
     ['media' => 'left'] del parcial); en mobile el texto sigue arriba
     (RECETARIO). Las reglas de orden están en la referencia de abajo.

   TOKENS NUEVOS OPCIONALES (solo si la piel usa la referencia):
   - --vc-hero-split-cols: tracks de la grilla desktop (fallback 50/50).

   COMPAT §2.7: sin reglas activas ⇒ imposible alterar ningún render.
   Sin estética, sin movimiento, sin elementos interactivos nuevos.
   ========================================================================== */

/* Sin reglas: con 'split' la composición del hero es de la piel (= v2.0). */

/* --------------------------------------------------------------------------
   REFERENCIA (copiar a design/home.css del proyecto y ajustar; NO
   descomentar acá: el motor no se toca y esta hoja debe seguir siendo
   un no-op — ver cabecera):

   @media (min-width: 880px) {
       .vc-hero--split {
           display: grid;
           grid-template-columns: var(--vc-hero-split-cols, minmax(0, 1fr) minmax(0, 1fr));
           gap: clamp(var(--sp-5), 4vw, var(--sp-8));
           align-items: center;
       }

       - Inversión opcional (variante 'media-left'): la imagen pasa a la
         columna 1 solo en desktop; el orden del DOM (texto primero) no
         cambia:
       .vc-hero--split.vc-hero--media-left .vc-hero__content { order: 2; }
       .vc-hero--split.vc-hero--media-left .vc-hero__media { order: 1; }
   }
   -------------------------------------------------------------------------- */