/* ═══════════════════════════════════════════════════════════════ ObservAuto Media Kit — Print Presentation Stylesheet Transforms option-g3 website sections into landscape slides Activated via .print-mode class on ═══════════════════════════════════════════════════════════════ */ /* === PRINT MODE ACTIVATION === */ body.print-mode { overflow: visible !important; background: var(--background) !important; } /* === HIDE INTERACTIVE / WEB-ONLY ELEMENTS === */ body.print-mode .nav, body.print-mode .hero__scroll-hint, body.print-mode .hero__collage, body.print-mode .oa-footer, body.print-mode .contact__form-wrap, body.print-mode .modal-overlay, body.print-mode .download-fab, body.print-mode .pdf-overlay, body.print-mode .hero__download-link, body.print-mode .social-proof, body.print-mode .dashboard, body.print-mode .skip-link, body.print-mode .inversion__panel, body.print-mode .awareness__cta { display: none !important; } /* === DISABLE ALL ANIMATIONS === */ body.print-mode *, body.print-mode *::before, body.print-mode *::after { animation: none !important; animation-duration: 0s !important; transition: none !important; } /* Force all reveal elements to be visible */ body.print-mode .reveal, body.print-mode .reveal-stagger { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; } body.print-mode .audience__card { opacity: 1 !important; transform: none !important; } body.print-mode .audience__card.is-visible { opacity: 1 !important; } /* === SLIDE BASE LAYOUT === */ body.print-mode .hero, body.print-mode .positioning, body.print-mode .audience, body.print-mode .channels, body.print-mode .formats, body.print-mode .inversion, body.print-mode .contact { width: 1280px !important; height: 720px !important; min-height: 720px !important; max-height: 720px !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; position: relative !important; display: flex !important; flex-direction: column !important; page-break-after: always !important; break-after: page !important; box-sizing: border-box !important; } /* === SLIDE FOOTER LINE === */ body.print-mode .hero::after, body.print-mode .positioning::after, body.print-mode .audience::after, body.print-mode .channels::after, body.print-mode .formats::after, body.print-mode .inversion::after, body.print-mode .contact::after { content: 'observauto.com · comercial@observauto.com · Media Kit 2026'; position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(67, 71, 79, 0.35); z-index: 10; pointer-events: none; } body.print-mode .hero::after, body.print-mode .contact::after { color: rgba(255, 255, 255, 0.2); } /* === SLIDE LOGO (top-right) === */ body.print-mode .hero::before, body.print-mode .positioning::before, body.print-mode .audience::before, body.print-mode .channels::before, body.print-mode .formats::before, body.print-mode .inversion::before, body.print-mode .contact::before { content: ''; position: absolute; top: 22px; right: 32px; width: 110px; height: 18px; background: url('https://observauto.com/wp-content/uploads/2023/11/Logo-Observauto-800x100-1.webp') no-repeat center; background-size: contain; z-index: 10; opacity: 0.4; } body.print-mode .hero::before, body.print-mode .contact::before { filter: brightness(0) invert(1); opacity: 0.3; } /* === SLIDE CONTAINERS === */ body.print-mode .container { max-width: 1120px !important; margin: 0 auto !important; padding: 0 56px !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } body.print-mode .container.grid-12 { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 24px !important; align-items: center !important; align-content: center !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 1: HERO (PORTADA) ═══════════════════════════════════════════════════════════════ */ body.print-mode .hero { align-items: center !important; justify-content: center !important; } body.print-mode .hero__bg { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, #001a3d 0%, #002657 30%, #1B3C71 60%, #1F6069 100%) !important; transform: none !important; } body.print-mode .hero__content { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; grid-template-columns: unset !important; padding: 48px 56px !important; } body.print-mode .hero__text { text-align: center !important; max-width: 700px !important; } body.print-mode .hero__badge { margin-bottom: 18px !important; font-size: 0.75rem !important; } body.print-mode .hero__title { font-size: 2.8rem !important; margin-bottom: 14px !important; line-height: 1.1 !important; } body.print-mode .hero__sub { font-size: 1rem !important; margin-bottom: 22px !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; } body.print-mode .hero__counters { display: flex !important; gap: 36px !important; justify-content: center !important; margin-bottom: 20px !important; } body.print-mode .hero__counter-value { font-size: 1.8rem !important; } body.print-mode .hero__counter-label { font-size: 0.68rem !important; } body.print-mode .hero__actions { display: flex !important; gap: 12px !important; justify-content: center !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 2: POSICIONAMIENTO ═══════════════════════════════════════════════════════════════ */ body.print-mode .positioning { background: var(--surface-low, #F2F3FF) !important; } body.print-mode .positioning__header { grid-column: 1 / 5 !important; } body.print-mode .positioning__content { grid-column: 6 / 13 !important; } body.print-mode .positioning .label { font-size: 0.68rem !important; margin-bottom: 6px !important; } body.print-mode .positioning__title { font-size: 2rem !important; line-height: 1.1 !important; } body.print-mode .positioning__text { font-size: 0.8rem !important; line-height: 1.5 !important; margin-bottom: 14px !important; } body.print-mode .positioning__values { gap: 12px !important; } body.print-mode .positioning__value { padding: 12px !important; } body.print-mode .positioning__value-icon { font-size: 1.1rem !important; } body.print-mode .positioning__value-title { font-size: 0.82rem !important; } body.print-mode .positioning__value-desc { font-size: 0.7rem !important; line-height: 1.4 !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 3: AUDIENCIA ═══════════════════════════════════════════════════════════════ */ body.print-mode .audience .container.grid-12 { align-items: start !important; align-content: center !important; } body.print-mode .audience__profile-col { grid-column: 1 / 5 !important; } body.print-mode .audience__data-col { grid-column: 6 / 13 !important; } body.print-mode .audience .label { font-size: 0.68rem !important; } body.print-mode .audience__grid { gap: 10px !important; } body.print-mode .audience__card { padding: 10px 14px !important; border-radius: 8px !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 4: CANALES ═══════════════════════════════════════════════════════════════ */ body.print-mode .channels { background: var(--surface-low, #F2F3FF) !important; } body.print-mode .channels__header { grid-column: 1 / 5 !important; } body.print-mode .channels__content { grid-column: 6 / 13 !important; } body.print-mode .channels .label { font-size: 0.68rem !important; } body.print-mode .channels__grid { gap: 10px !important; } body.print-mode .channels__card { padding: 14px !important; border-radius: 8px !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 5: FORMATOS ═══════════════════════════════════════════════════════════════ */ body.print-mode .formats__header { grid-column: 1 / 5 !important; } body.print-mode .formats__content { grid-column: 6 / 13 !important; } body.print-mode .formats .label { font-size: 0.68rem !important; } /* Show all accordion items open in print */ body.print-mode .accordion-content { max-height: none !important; overflow: visible !important; display: block !important; } body.print-mode .accordion-item { margin-bottom: 6px !important; } body.print-mode .accordion-trigger { font-size: 0.78rem !important; padding: 8px 12px !important; } body.print-mode .accordion-inner { padding: 6px 12px !important; } body.print-mode .accordion-desc { font-size: 0.7rem !important; line-height: 1.4 !important; } body.print-mode .formats__tabs { display: none !important; } /* Show only reach panel in print */ body.print-mode .formats__subpanel--reach { display: block !important; } body.print-mode .formats__subpanel--awareness { display: none !important; } body.print-mode .accordion-icon { display: none !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 6: INVERSIÓN ═══════════════════════════════════════════════════════════════ */ body.print-mode .inversion { background: var(--background) !important; } body.print-mode .inversion .container { justify-content: center !important; align-items: center !important; } body.print-mode .inversion__intro { text-align: center !important; margin-bottom: 20px !important; } body.print-mode .inversion__intro .label { font-size: 0.68rem !important; } body.print-mode .inversion__intro-title { font-size: 1.8rem !important; } body.print-mode .inversion__intro-text { font-size: 0.82rem !important; } body.print-mode .inversion__lines { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; width: 100% !important; max-width: 900px !important; } body.print-mode .inversion__line { padding: 16px !important; border-radius: 10px !important; cursor: default !important; } body.print-mode .inversion__line-name { font-size: 0.9rem !important; } body.print-mode .inversion__line-desc { font-size: 0.7rem !important; line-height: 1.4 !important; display: block !important; max-height: none !important; opacity: 1 !important; } body.print-mode .inversion__line-products { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; } body.print-mode .inversion__line-tag { font-size: 0.6rem !important; padding: 2px 8px !important; } body.print-mode .inversion__line-arrow { display: none !important; } /* ═══════════════════════════════════════════════════════════════ SLIDE 7: CONTACTO (CTA — sin footer, sin formulario) ═══════════════════════════════════════════════════════════════ */ body.print-mode .contact { background: linear-gradient(135deg, #001a3d 0%, #002657 30%, #1B3C71 60%, #1F6069 100%) !important; } body.print-mode .contact .container.grid-12 { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } body.print-mode .contact__header { text-align: center !important; grid-column: unset !important; max-width: 600px !important; } body.print-mode .contact .label { color: rgba(238, 240, 255, 0.5) !important; font-size: 0.7rem !important; } body.print-mode .contact__title { color: #FFFFFF !important; font-size: 2.2rem !important; line-height: 1.1 !important; } body.print-mode .contact__title em { color: var(--tertiary-fixed, #FFDF91) !important; } body.print-mode .contact__text { color: rgba(238, 240, 255, 0.65) !important; font-size: 0.9rem !important; max-width: 500px !important; } body.print-mode .contact__info { flex-direction: row !important; gap: 24px !important; justify-content: center !important; margin-top: 20px !important; } body.print-mode .contact__info-item { color: rgba(238, 240, 255, 0.6) !important; font-size: 0.8rem !important; } body.print-mode .contact__info-item .material-symbols-outlined { color: var(--tertiary-fixed, #FFDF91) !important; } /* ═══════════════════════════════════════════════════════════════ FORCE DESKTOP LAYOUT (override responsive) ═══════════════════════════════════════════════════════════════ */ body.print-mode .container.grid-12 { grid-template-columns: repeat(12, 1fr) !important; }