o en lead magnets. */ .band{ position:relative; isolation:isolate; } .band[data-bg]::before, .band[data-bg]::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity 600ms var(--ease-out); } /* ::before = imagen · ::after = velo (pinta después ⇒ queda por encima de la imagen) */ .band[data-bg]::before{ background-size:cover; background-position:center; background-repeat:no-repeat; } .band.has-bg[data-bg]::before, .band.has-bg[data-bg]::after{ opacity:1; } .band.deep.has-bg[data-bg]::after{ background:color-mix(in srgb, var(--deep) 82%, transparent); } .band.light.has-bg[data-bg]::after{ background:color-mix(in srgb, var(--bg) 88%, transparent); } @media (prefers-reduced-motion:reduce){ .band[data-bg]::before, .band[data-bg]::after{ transition:none; } } /* ---------- Fondos de banda (landing) ---------- Imagen en ::before, se revela con .has-bg. AVIF con respaldo WebP vía image-set; la línea url(webp) suelta es el fallback para motores sin image-set(type). */ .band[data-bg="ce-landing-hero-fondo"]::before{ background-image:url("brand/bg/ce-landing-hero-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-landing-hero-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-landing-hero-fondo-mobile.webp") type("image/webp")); } .band[data-bg="ce-landing-recibes-fondo"]::before{ background-image:url("brand/bg/ce-landing-recibes-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-landing-recibes-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-landing-recibes-fondo-mobile.webp") type("image/webp")); } .band[data-bg="ce-landing-autora-fondo"]::before{ background-image:url("brand/bg/ce-landing-autora-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-landing-autora-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-landing-autora-fondo-mobile.webp") type("image/webp")); } @media (min-width:900px){ .band[data-bg="ce-landing-hero-fondo"]::before{ background-image:url("brand/bg/ce-landing-hero-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-landing-hero-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-landing-hero-fondo-desktop.webp") type("image/webp")); } .band[data-bg="ce-landing-recibes-fondo"]::before{ background-image:url("brand/bg/ce-landing-recibes-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-landing-recibes-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-landing-recibes-fondo-desktop.webp") type("image/webp")); } .band[data-bg="ce-landing-autora-fondo"]::before{ background-image:url("brand/bg/ce-landing-autora-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-landing-autora-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-landing-autora-fondo-desktop.webp") type("image/webp")); } } /* ---------- Fondo a nivel (lead magnets) ---------- ::before = imagen (z-2, sobre el color base del body) · ::after = velo verde (z-1). */ body[data-bg]::before, body[data-bg]::after{ content:""; position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity 600ms var(--ease-out); } body[data-bg]::before{ z-index:-2; background-size:cover; background-position:center; background-repeat:no-repeat; } body[data-bg]::after{ z-index:-1; background:color-mix(in srgb, var(--deep) 86%, transparent); } body[data-bg].has-bg::before, body[data-bg].has-bg::after{ opacity:1; } @media (prefers-reduced-motion:reduce){ body[data-bg]::before, body[data-bg]::after{ transition:none; } } body[data-bg="ce-lm1-paradigma-fondo"]::before{ background-image:url("brand/bg/ce-lm1-paradigma-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-lm1-paradigma-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-lm1-paradigma-fondo-mobile.webp") type("image/webp")); } body[data-bg="ce-lm2-respiracion-fondo"]::before{ background-image:url("brand/bg/ce-lm2-respiracion-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-lm2-respiracion-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-lm2-respiracion-fondo-mobile.webp") type("image/webp")); } body[data-bg="ce-lm3-cartas-fondo"]::before{ background-image:url("brand/bg/ce-lm3-cartas-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-lm3-cartas-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-lm3-cartas-fondo-mobile.webp") type("image/webp")); } body[data-bg="ce-lm4-bitacora-fondo"]::before{ background-image:url("brand/bg/ce-lm4-bitacora-fondo-mobile.webp"); background-image:image-set(url("brand/bg/ce-lm4-bitacora-fondo-mobile.avif") type("image/avif"), url("brand/bg/ce-lm4-bitacora-fondo-mobile.webp") type("image/webp")); } @media (min-width:900px){ body[data-bg="ce-lm1-paradigma-fondo"]::before{ background-image:url("brand/bg/ce-lm1-paradigma-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-lm1-paradigma-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-lm1-paradigma-fondo-desktop.webp") type("image/webp")); } body[data-bg="ce-lm2-respiracion-fondo"]::before{ background-image:url("brand/bg/ce-lm2-respiracion-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-lm2-respiracion-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-lm2-respiracion-fondo-desktop.webp") type("image/webp")); } body[data-bg="ce-lm3-cartas-fondo"]::before{ background-image:url("brand/bg/ce-lm3-cartas-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-lm3-cartas-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-lm3-cartas-fondo-desktop.webp") type("image/webp")); } body[data-bg="ce-lm4-bitacora-fondo"]::before{ background-image:url("brand/bg/ce-lm4-bitacora-fondo-desktop.webp"); background-image:image-set(url("brand/bg/ce-lm4-bitacora-fondo-desktop.avif") type("image/avif"), url("brand/bg/ce-lm4-bitacora-fondo-desktop.webp") type("image/webp")); } } /* plan-crecimiento.html: fondo listo en assets/brand/bg/ce-plan-hero-fondo-*, se cablea al reconstruir esa página (CE-46). */ /* ---------- Recursos inline (imagen dentro de la línea de texto) ---------- */ .ce-mark{ display:inline-block; background-size:contain; background-repeat:no-repeat; background-position:center; vertical-align:baseline; } /* Núcleo solar como ornamento tipográfico. Fallback: punto oro mientras no exista la imagen. */ .ce-mark--sol{ width:.62em; height:.62em; transform:translateY(-.02em); border-radius:50%; background-color:var(--gold); /* fallback si la imagen no carga */ background-image:url("brand/ce-inline-nucleo-solar.png"); background-image:image-set(url("brand/ce-inline-nucleo-solar.webp") type("image/webp"), url("brand/ce-inline-nucleo-solar.png") type("image/png")); } .band.deep .ce-mark--sol{ background-color:var(--on-deep-gold); } /* Hairline botánica junto a un título. */ .ce-mark--hoja{ width:2.6em; height:1em; opacity:.9; background-image:url("brand/ce-inline-hoja-trazo.png"); background-image:image-set(url("brand/ce-inline-hoja-trazo.webp") type("image/webp"), url("brand/ce-inline-hoja-trazo.png") type("image/png")); } /* ---------- Retrato de la autora (foto real, no IA) ---------- */ .author-portrait{ border:1px solid var(--on-deep-line); border-radius:var(--radius-md); background:color-mix(in srgb, var(--on-deep) 4%, transparent); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--on-deep-mute); font-size:.76rem; padding:1.5rem 1rem; background-size:cover; background-position:center top; } .author-portrait.has-photo{ border-color:transparent; color:transparent; } /* .author-portrait[data-photo="ce-marjorie-retrato-editorial"]{ background-image:url("brand/ce-marjorie-retrato-editorial.jpg"); } */ /* ---------- Mockups de recursos (bodegón editorial) ---------- */ .asset-mock{ aspect-ratio:4/3; width:100%; border-radius:var(--radius-md); background:color-mix(in srgb, var(--on-deep) 5%, transparent); border:1px solid var(--on-deep-line); background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:.6rem .8rem; font-size:.66rem; color:var(--on-deep-mute); letter-spacing:.02em; margin-bottom:1rem; } .band.light .asset-mock{ background:color-mix(in srgb, var(--ink) 4%, transparent); border-color:var(--line); color:var(--muted); } .asset-mock.has-img{ border-color:transparent; color:transparent; padding:0; } /* Mockups bodegón retirados 2026-08-29 (no encajaban con el estilo del proyecto). Imágenes generadas siguen en assets/brand/bg/ce-mock-* por si se retoman. */ /* ---------- CTA sobre fondo verde profundo ---------- OJO: --cta-bg es verde mineral en tema claro = mismo color que .band.deep. */ .band.deep .btn-primary, .on-deep .btn-primary{ background:var(--on-deep-gold); color:var(--ce-verde-mineral); border:none; box-shadow:0 14px 30px -14px color-mix(in srgb, var(--on-deep-gold) 55%, transparent); } .band.deep .btn-ghost, .on-deep .btn-ghost{ background:color-mix(in srgb, var(--ce-marfil) 6%, transparent); color:var(--on-deep); border:1px solid color-mix(in srgb, var(--ce-marfil) 32%, transparent); } .band.deep .btn-ghost:hover, .on-deep .btn-ghost:hover{ border-color:var(--on-deep-gold); color:var(--on-deep-gold); }