/* AutoChiro — Presentación Slides 16:9 de canvas fijo (1280×720). Requiere tokens.css, que es donde se declara la versión del sistema. El deck es HTML: se ve en el navegador, se importa a Adobe Express (export_html_to_express) y de ahí sale PPTX o PDF. Export: · Cada slide =
, tamaño fijo, sin depender del viewport. · En el : · Nada que dependa de scroll, hover o JS: el slide es una imagen fija. · Ejecutar html_export_readiness_skill ANTES de cada export, siempre. Superficies del deck: · Portada → degradado de marca con texto blanco. Es el momento más alto: una portada gris arranca el deck en tono apagado. · Cuerpo → blanco, o tibio para separar un bloque. · Cierre y la idea que hay que recordar → carbón, para que pesen. El naranja dentro del slide solo ancla la cifra que cuenta la historia. */ .ac-deck { margin: 0; padding: 40px; background: var(--ac-ink-05); display: flex; flex-direction: column; align-items: center; gap: 40px; font-family: var(--ac-font-body); } .ac-slide { position: relative; box-sizing: border-box; width: 1280px; height: 720px; flex: none; overflow: hidden; background: var(--ac-white); color: var(--ac-ink); font-family: var(--ac-font-body); font-size: 22px; line-height: 1.5; padding: 76px 100px; } /* ---- Superficies ---- */ .ac-slide--ink { background: var(--ac-ink); color: var(--ac-white); } .ac-slide--tint { background: var(--ac-tint); } .ac-slide--acento { background: var(--ac-gradient); color: var(--ac-white); } .ac-slide--ink .ac-slide__title, .ac-slide--acento .ac-slide__title { color: var(--ac-white); } /* ---- Texto ---- */ /* Antetítulo: la misma píldora que en web. En flujo normal, no anclada: así el espacio con el titular es real y no depende del padding del slide. */ .ac-slide__eyebrow { margin: 0 0 28px; display: inline-block; padding: 5px 14px; border-radius: var(--ac-radius-pill); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--ac-glass); border: 1px solid var(--ac-line); color: var(--ac-action); } .ac-slide--ink .ac-slide__eyebrow, .ac-slide--acento .ac-slide__eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: var(--ac-white); } /* El titular del slide es la conclusión, no la etiqueta del tema. */ .ac-slide__title { font-family: var(--ac-font-heading); font-weight: 700; font-size: 54px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ac-ink); margin: 0 0 36px; max-width: 21ch; } .ac-slide__title--xl { font-size: 76px; max-width: 15ch; } .ac-slide__body { font-size: 24px; max-width: 58ch; margin: 0 0 24px; color: var(--ac-ink-70); } .ac-slide--ink .ac-slide__body, .ac-slide--acento .ac-slide__body { color: rgba(255,255,255,0.82); } /* ---- Pie ---- */ .ac-slide__footer { position: absolute; left: 100px; right: 100px; bottom: 50px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--ac-ink-70); } .ac-slide--ink .ac-slide__footer, .ac-slide--acento .ac-slide__footer { color: rgba(255,255,255,0.6); } /* ---- Rejilla ---- */ .ac-slide__cols { display: flex; gap: 28px; } .ac-slide__col { flex: 1 1 0; } /* ---- Card de slide ---- */ .ac-slide-card { box-sizing: border-box; background: var(--ac-white); border: 1px solid var(--ac-ink-15); border-radius: 18px; padding: 32px; } .ac-slide-card__title { font-family: var(--ac-font-heading); font-weight: 600; font-size: 23px; margin: 0 0 10px; } .ac-slide-card__text { font-size: 19px; color: var(--ac-ink-70); margin: 0; } /* ---- Cifras ---- */ .ac-slide-stats { display: flex; gap: 56px; margin-top: 8px; } .ac-slide-stat { flex: 1 1 0; } .ac-slide-stat__value { display: block; font-family: var(--ac-font-heading); font-weight: 700; font-size: 84px; line-height: 1; color: var(--ac-ink); font-variant-numeric: tabular-nums; } .ac-slide-stat__label { display: block; margin-top: 12px; font-size: 18px; color: var(--ac-ink-70); } .ac-slide--ink .ac-slide-stat__value { color: var(--ac-white); } .ac-slide--ink .ac-slide-stat__label { color: rgba(255,255,255,0.7); } /* Una cifra por slide puede ir en naranja: la que cuenta la historia. */ .ac-slide-stat--key .ac-slide-stat__value { color: var(--ac-action); } /* ---- Bullets ---- */ .ac-slide-list { list-style: none; padding: 0; margin: 0; font-size: 24px; } .ac-slide-list li { position: relative; padding-left: 40px; margin-bottom: 26px; } .ac-slide-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--ac-action); }