/* ========================================================================== AJUSTES FINALES · 31/07/2026 Se carga ÚLTIMO, después de app / flyer-design / flyer-premium / flyer-v3 / flyer-ai.css. Todo lo de acá corrige detalles que estaban repartidos entre esos cinco archivos, sin tocarlos, para no romper nada que ya funcionaba. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · PIE INSTITUCIONAL El arte de logo-hip.png es tinta negra sobre transparencia, así que sobre el fondo oscuro del flyer desaparecía. La solución anterior fue una caja blanca (flyer-design.css:274) que quedaba como un parche pegado. Ahora se usa logo-hip-claro.png: mismo logo con el wordmark en crema, el isotipo turquesa conservado y recortado al contenido (antes tenía 40% de margen transparente, por eso se veía chico dentro de la caja). -------------------------------------------------------------------------- */ .flyer-footer img, .flyer-canvas.plantilla-impacto .flyer-footer img, .flyer-canvas.plantilla-editorial .flyer-footer img, .flyer-canvas.plantilla-mosaico .flyer-footer img { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; max-width: 10cqw !important; max-height: 5cqw !important; opacity: 1 !important; filter: drop-shadow(0 0.12cqw 0.26cqw rgba(0, 0, 0, 0.62)) !important; } /* Un poco más de aire entre el logo y la bajada institucional. */ .flyer-footer { gap: 1.15cqw !important; } /* La bajada "HIPÓDROMO DE TODOS" se quitó del markup (31/07/2026). Se deja oculta por CSS también, para que no reaparezca si alguna plantilla vieja la sigue imprimiendo. */ .flyer-footer span { display: none !important; } /* Velo de apoyo detrás del pie: la IA a veces dibuja sellos o medallones justo en esa franja aunque el prompt lo prohíba. Con esto el lockup institucional se lee igual, sin depender de que el modelo obedezca. */ .flyer-canvas.con-fondo-ia .flyer-footer::before { content: ""; position: absolute; /* Elipse centrada en el logo. Se define por radio, no por insets, así que funciona igual en las tres plantillas sin importar el ancho del pie. Se apaga mucho antes del recuadro de precio y no tapa el hilo inferior del marco. */ inset: -1cqw 0 -0.1cqw 0; z-index: -1; background: radial-gradient( ellipse 9% 150% at 50% 50%, rgba(6, 4, 3, 0.92) 0%, rgba(6, 4, 3, 0.66) 58%, rgba(6, 4, 3, 0) 100% ); } /* -------------------------------------------------------------------------- 2 · MARCO ORNAMENTAL vs PRECIO El marco se dibujaba ENCIMA del recuadro de precio (marco z-index 35 en flyer-ai.css contra 32 del precio), así que la voluta de la esquina inferior derecha cruzaba los números. Ahora precio, pie y encabezado van siempre por arriba del ornamento; el recuadro de precio es opaco, así que tapa la voluta de forma prolija en lugar de mezclarse con ella. -------------------------------------------------------------------------- */ .flyer-canvas .flyer-price, .flyer-canvas.con-fondo-ia .flyer-price, .flyer-canvas.plantilla-impacto .flyer-price { z-index: 72 !important; } .flyer-canvas .flyer-footer, .flyer-canvas.con-fondo-ia .flyer-footer, .flyer-canvas.plantilla-impacto .flyer-footer { z-index: 70 !important; } .flyer-canvas .flyer-header, .flyer-canvas.con-fondo-ia .flyer-header, .flyer-canvas.plantilla-impacto .flyer-header { z-index: 68 !important; } .flyer-canvas .flyer-offer, .flyer-canvas.con-fondo-ia .flyer-offer { z-index: 66 !important; } /* Las volutas de abajo comparten espacio con el precio y el pie: se bajan un punto para que acompañen en vez de competir. Arriba quedan como están. */ .flyer-ornamental-frame .ornament-corner-bl, .flyer-ornamental-frame .ornament-corner-br { opacity: 0.58; } /* -------------------------------------------------------------------------- 3 · COLOR DEL MARCO SEGÚN LA PALETA DEL LOCAL flyer-v3.css fija el color a mano por perfil (#ad772e para irineo, #c8943b para capriccio) con !important, así que un local nuevo con su paleta cargada igual salía dorado. Ahora el marco toma --flyer-frame, que perfilVisualLocal() completa con el color_primario que se carga en configurar-local.php. -------------------------------------------------------------------------- */ .flyer-canvas .flyer-ornamental-frame, .flyer-canvas.perfil-capriccio .flyer-ornamental-frame, .flyer-canvas.perfil-irineo .flyer-ornamental-frame, .flyer-canvas[data-local-profile] .flyer-ornamental-frame { color: var(--flyer-frame, var(--v3-gold, #c99a46)) !important; } /* -------------------------------------------------------------------------- 4 · IMPRESIÓN El velo del pie y el marco tienen que salir en el PDF con el color exacto. -------------------------------------------------------------------------- */ @media print { .flyer-footer, .flyer-footer *, .flyer-footer::before, .flyer-ornamental-frame, .flyer-ornamental-frame * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* -------------------------------------------------------------------------- 5 · JERARQUÍA DEL BLOQUE DE OFERTA Los artículos del combo son lo que la gente tiene que leer desde lejos, así que pasan a ser el texto más grande de la pieza y "PROMO" baja a etiqueta. Los tamaños quedan como variables para poder ajustarlos sin buscar en 1.500 líneas de CSS: se cambian acá y listo. -------------------------------------------------------------------------- */ .flyer-canvas { --combo-tamano: 7.1cqw; /* artículos del combo (campo Descripción) */ --combo-tamano-largo: 6cqw; /* idem cuando el texto es largo */ --titulo-tamano: 6.2cqw; /* campo Título */ --promo-tamano: 3.9cqw; /* la etiqueta PROMO / eyebrow */ } .flyer-canvas .flyer-description, .flyer-canvas.plantilla-impacto .flyer-description, .flyer-canvas.con-fondo-ia .flyer-description { font-size: var(--combo-tamano) !important; line-height: 0.95 !important; max-width: 94% !important; } .flyer-canvas.descripcion-larga .flyer-description, .flyer-canvas.plantilla-impacto.descripcion-larga .flyer-description { font-size: var(--combo-tamano-largo) !important; } .flyer-canvas .flyer-title, .flyer-canvas.plantilla-impacto .flyer-title, .flyer-canvas.con-fondo-ia .flyer-title { font-size: var(--titulo-tamano) !important; line-height: 0.97 !important; } /* Títulos largos: se achican en escalones para no desbordar el bloque. */ .flyer-canvas.titulo-largo .flyer-title, .flyer-canvas.plantilla-impacto.titulo-largo .flyer-title { font-size: calc(var(--titulo-tamano) * 0.82) !important; } .flyer-canvas.titulo-muy-largo .flyer-title, .flyer-canvas.plantilla-impacto.titulo-muy-largo .flyer-title { font-size: calc(var(--titulo-tamano) * 0.7) !important; } /* PROMO como etiqueta: chica, espaciada, sin competir con los artículos. */ .flyer-canvas .flyer-eyebrow, .flyer-canvas.plantilla-impacto .flyer-eyebrow { font-size: var(--promo-tamano) !important; letter-spacing: 0.22em !important; opacity: 0.95 !important; margin-bottom: 0.9cqw !important; } /* -------------------------------------------------------------------------- 6 · GROSORES POR VARIANTE DE MARCO Cada variante necesita su propio peso de línea: el filete tiene que ser fino para leerse elegante, y las escuadras sueltas necesitan algo más de cuerpo para no desaparecer. -------------------------------------------------------------------------- */ .flyer-canvas .flyer-ornamental-frame.marco-filete .ornament-main { stroke-width: 3 !important; } .flyer-canvas .flyer-ornamental-frame.marco-filete .ornament-thin { stroke-width: 1.5 !important; opacity: 0.75 !important; } .flyer-canvas .flyer-ornamental-frame.marco-esquinas .ornament-main { stroke-width: 4.4 !important; } .flyer-canvas .flyer-ornamental-frame.marco-esquinas .ornament-thin { stroke-width: 1.9 !important; opacity: 0.7 !important; } .flyer-canvas .flyer-ornamental-frame.marco-doble .ornament-main { stroke-width: 3.2 !important; } .flyer-canvas .flyer-ornamental-frame.marco-doble .ornament-thin { stroke-width: 1.4 !important; opacity: 0.7 !important; } /* Los rombos son macizos en todas las variantes. */ .flyer-canvas .flyer-ornamental-frame .ornament-fill { fill: currentColor !important; stroke: none !important; } /* Las variantes limpias no tienen volutas: la regla de opacidad de la entrega anterior solo debe aplicar al marco ornamental viejo. */ .flyer-ornamental-frame.marco-ornamental .ornament-corner-bl, .flyer-ornamental-frame.marco-ornamental .ornament-corner-br { opacity: 0.58; } /* -------------------------------------------------------------------------- 7 · EL PIE VA ADENTRO DEL MARCO Con bottom 1.25% el pie quedaba montado sobre el hilo inferior del marco (que cae al 2,1% del alto) y su velo oscuro se comía la línea justo en el centro. Subiéndolo, el hilo pasa limpio por debajo y el lockup queda contenido dentro del marco, como corresponde. -------------------------------------------------------------------------- */ .flyer-canvas .flyer-footer, .flyer-canvas.plantilla-impacto .flyer-footer, .flyer-canvas.con-fondo-ia .flyer-footer { bottom: 4.1% !important; } /* -------------------------------------------------------------------------- 8 · PIE SOLO CON EL LOGO Al quitar la bajada institucional, el pie queda con un único elemento. En plantilla-impacto el logo estaba posicionado en absoluto al 50% del ancho de la barra; se mantiene centrado y se le da el alto completo disponible. -------------------------------------------------------------------------- */ .flyer-canvas .flyer-footer, .flyer-canvas.plantilla-impacto .flyer-footer, .flyer-canvas.con-fondo-ia .flyer-footer { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } .flyer-canvas.plantilla-impacto .flyer-footer img { position: static !important; transform: none !important; left: auto !important; top: auto !important; }