/* ═══════════════════════════════════════════════════════════════════
   DEMIN EXPERIENCE ENGINE · Tema «respirando» (2026-09-26)
   Reproduce la presentación vigente de Diego en Canva (Respirando Con-ciencia,
   DAHTmFbw8c4): negro puro para sentir, papel cálido para comprender, mayúsculas
   en Playfair Display, texto de apoyo en Montserrat, dorado sobre negro y el ojo
   de DEMIN como firma. Pedido de Diego: «que se parezca a esta… tomarla como base
   para crear el resto». Solo aplica con visual.theme = "respirando" en el JSON;
   el motor y las experiencias sin tema no cambian.
   ═══════════════════════════════════════════════════════════════════ */
.xp[data-theme="respirando"] {
  --x-dark: #000; --x-cream: #EDE7DD; --x-gold: #B08F5E; --x-gold-ink: #7A5A26;
  --x-display: 'Playfair Display', Georgia, serif;
  --x-sans: 'Montserrat', 'DM Sans', system-ui, sans-serif;
  --r-ink-paper: #111;
  background: #000;
}
.xp[data-theme="respirando"] .xm { --ink: var(--x-gold); --muted: var(--x-gold); --quiet: rgba(176, 143, 94, 0.82); --accent: var(--x-gold); --line: rgba(176, 143, 94, 0.4); background: #000; }
.xp[data-theme="respirando"] .xm[data-tone="paper"] { --ink: var(--r-ink-paper); --muted: #1d1d1d; --quiet: #2a2a2a; --accent: var(--x-gold-ink); --line: rgba(17, 17, 17, 0.22); background: var(--x-cream); }
.xp[data-theme="respirando"] .xm::before { background: none; }

/* ─── Tipografía: MAYÚSCULAS serif (títulos) + Montserrat (apoyo) ─── */
.xp[data-theme="respirando"] .xm-hero,
.xp[data-theme="respirando"] .xm-question,
.xp[data-theme="respirando"] .xm-invite,
.xp[data-theme="respirando"] .xm-step,
.xp[data-theme="respirando"] .xm-phase,
.xp[data-theme="respirando"] .xm-reveal--sequence .xm-beat,
.xp[data-theme="respirando"] .xm-pole {
  font-family: var(--x-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.005em;
  font-variation-settings: normal; color: var(--ink); text-wrap: balance;
}
.xp[data-theme="respirando"] .xm-hero { font-size: clamp(2rem, 4.9vw, 6.2rem); line-height: 1.18; max-width: 36ch; }
.xp[data-theme="respirando"] .xm-hero em, .xp[data-theme="respirando"] .xm-question em { font-style: italic; }
.xp[data-theme="respirando"] .xm-hero--body { font-size: clamp(2rem, 4.4vw, 5.6rem); font-weight: 600; }
.xp[data-theme="respirando"] .xm-hero--science { font-size: clamp(1.9rem, 3.8vw, 4.6rem); max-width: 22ch; }
.xp[data-theme="respirando"] .xm[data-comp="type-bleed"] .xm-hero { font-size: clamp(2.2rem, 5vw, 6rem); line-height: 1.15; letter-spacing: 0; max-width: 18ch; font-weight: 600; }
.xp[data-theme="respirando"] .xm-question { font-size: clamp(2rem, 4.9vw, 6.2rem); line-height: 1.18; max-width: 22ch; }
.xp[data-theme="respirando"] .xm-invite { font-size: clamp(2rem, 4.9vw, 6.2rem); line-height: 1.2; margin: 0; max-width: 20ch; }
.xp[data-theme="respirando"] .xm-step { font-family: var(--x-sans); font-weight: 400; font-size: clamp(1.15rem, 2.3vw, 2.7rem); line-height: 1.4; letter-spacing: 0.02em; }
.xp[data-theme="respirando"] .xm-steps { margin-top: clamp(16px, 3.5vh, 40px); gap: 0.35em; }
.xp[data-theme="respirando"] .xm-ask { font-family: var(--x-sans); font-style: italic; text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.7rem); letter-spacing: 0.04em; }
.xp[data-theme="respirando"] .xm-sub { margin: 0.35em 0 0; font-family: var(--x-display); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 3rem); line-height: 1.3; color: var(--ink); }
.xp[data-theme="respirando"] .xm-support { margin-top: clamp(14px, 3vh, 34px); font-family: var(--x-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.05rem, 2.1vw, 2.5rem); line-height: 1.4; color: var(--ink); max-width: 42ch; }
.xp[data-theme="respirando"] .xm-whisper { font-family: var(--x-sans); font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.9rem, 1.45vw, 1.6rem); color: var(--quiet); max-width: 64ch; }
.xp[data-theme="respirando"] .xm-words { font-family: var(--x-sans); font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(1.05rem, 1.8vw, 2.1rem); color: var(--ink); margin-top: clamp(16px, 3.5vh, 40px); }
.xp[data-theme="respirando"] .xm-words i { color: var(--ink); margin: 0 0.5em; }
.xp[data-theme="respirando"] .xm-final { font-family: var(--x-sans); font-style: italic; text-transform: uppercase; font-size: clamp(0.95rem, 1.4vw, 1.5rem); color: var(--ink); }
.xp[data-theme="respirando"] .xm-reveal--accumulate { font-family: var(--x-sans); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 2.2rem); letter-spacing: 0.03em; font-weight: 400; max-width: 38ch; }
.xp[data-theme="respirando"] .xm-contra { font-family: var(--x-sans); font-style: italic; font-size: clamp(1rem, 1.7vw, 1.9rem); }
.xp[data-theme="respirando"] .xm-contra li { display: list-item; list-style: none; }
.xp[data-theme="respirando"] .xm-contra li:not(:last-child)::after { content: none; }
.xp[data-theme="respirando"] .xm-contra__care { font-family: var(--x-sans); color: var(--quiet); }
.xp[data-theme="respirando"] .xm-node { font-family: var(--x-sans); text-transform: uppercase; letter-spacing: 0.03em; }

/* ─── Figura: el ojo dorado de DEMIN y los orbes ─────────────────── */
.xp[data-theme="respirando"] .xm-split { display: flex; align-items: center; gap: clamp(24px, 6vw, 120px); width: 100%; }
.xp[data-theme="respirando"] .xm-split--below, .xp[data-theme="respirando"] .xm-split--above { flex-direction: column; gap: clamp(18px, 4.5vh, 56px); }
.xp[data-theme="respirando"] .xm-text { display: flex; flex-direction: column; align-items: inherit; min-width: 0; }
.xp[data-theme="respirando"] .xm[data-comp="center"] .xm-split { align-items: center; justify-content: center; }
.xp[data-theme="respirando"] .xm[data-comp="center"] .xm-text { align-items: center; text-align: center; }
.xp[data-theme="respirando"] .xm[data-comp="left"] .xm-body { max-width: none; width: 100%; }
.xp[data-theme="respirando"] .xm[data-comp="left"] .xm-split--right { justify-content: space-between; }
.xp[data-theme="respirando"] .xm[data-comp="right"] .xm-body { max-width: none; width: 100%; }
.xp[data-theme="respirando"] .xm[data-comp="right"] .xm-split--left { justify-content: space-between; }
.xp[data-theme="respirando"] .xm[data-comp="right"] .xm-text { align-items: center; text-align: center; }
.xp[data-theme="respirando"] .xm-figure { display: flex; align-items: center; justify-content: center; gap: 24px; flex: 0 0 auto; }
.xp[data-theme="respirando"] .xm-glyph { display: grid; place-items: center; color: var(--x-gold); }
.xp[data-theme="respirando"] .xm-glyph svg { width: clamp(160px, 19vw, 380px); height: auto; fill: none; stroke: currentColor; stroke-width: 5; }
.xp[data-theme="respirando"] .xm-glyph img { display: block; width: clamp(140px, 16vw, 320px); height: auto; }
.xp[data-theme="respirando"] .xm-glyph--ojo-llave img { width: clamp(160px, 17vw, 340px); }
.xp[data-theme="respirando"] .xm-glyph--box { background: #000; width: clamp(220px, 27vw, 540px); aspect-ratio: 1; }
.xp[data-theme="respirando"] .xm-glyph--box img { width: 62%; }
.xp[data-theme="respirando"] .xm-orb { display: block; width: clamp(160px, 19vw, 400px); aspect-ratio: 1; border-radius: 50%; }
.xp[data-theme="respirando"] .xm-orb--arena { background: radial-gradient(circle at 50% 50%, #7DB3A6 0%, #C7A57F 42%, #B5936C 58%, #3B3127 82%, #120F0C 100%); box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25); }
.xp[data-theme="respirando"] .xm-orb--noche { background: radial-gradient(circle at 50% 50%, rgba(66, 118, 102, 0.9) 0%, #2A2A22 45%, #141411 72%, #0A0A09 100%); box-shadow: 0 0 0 1px rgba(237, 231, 221, 0.14); }
@media (prefers-reduced-motion: no-preference) {
  .xp[data-theme="respirando"] .xm.is-active .xm-orb { animation: resp-orb 9s cubic-bezier(0.45, 0, 0.55, 1) infinite 1.2s; }
}
@keyframes resp-orb { 0%, 100% { transform: scale(0.97); } 50% { transform: scale(1); } }

/* ─── Lados (Canva p. 4): texto · orbe · texto ─────────────────── */
.xp[data-theme="respirando"] .xm-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 80px); width: min(100%, 1500px); margin: clamp(18px, 4vh, 48px) auto; }
.xp[data-theme="respirando"] .xm-sides p { margin: 0; font-family: var(--x-sans); font-size: clamp(1rem, 1.55vw, 1.85rem); line-height: 1.5; color: var(--ink); text-align: center; }
.xp[data-theme="respirando"] .xm-sides b { font-weight: 700; }

/* ─── Lista y columnas (Canva p. 18, 20, 25, 30, 32) ───────────── */
.xp[data-theme="respirando"] .xm-listbox { margin-top: clamp(16px, 3.5vh, 40px); text-align: left; }
.xp[data-theme="respirando"] .xm-list__title { margin: 0 0 0.5em; font-family: var(--x-sans); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.8rem); color: var(--ink); }
.xp[data-theme="respirando"] .xm-list { list-style: none; margin: 0; padding: 0; font-family: var(--x-sans); font-style: italic; font-size: clamp(1rem, 1.65vw, 1.95rem); line-height: 1.45; color: var(--ink); }
.xp[data-theme="respirando"] .xm-list li { padding: 0.12em 0; }
.xp[data-theme="respirando"] .xm-list li b { display: block; font-weight: 700; text-transform: uppercase; }
.xp[data-theme="respirando"] .xm-list li span { display: block; }
.xp[data-theme="respirando"] .xm-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: clamp(20px, 5vw, 110px); width: min(100%, 1400px); margin: clamp(18px, 4vh, 44px) auto 0; text-align: left; }
.xp[data-theme="respirando"] .xm-col__title { margin: 0 0 0.4em; font-family: var(--x-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 3.6rem); color: var(--ink); text-align: center; }
.xp[data-theme="respirando"] .xm-col__text { margin: 0; font-family: var(--x-sans); font-size: clamp(0.9rem, 1.2vw, 1.3rem); line-height: 1.45; color: var(--ink); text-align: center; }
.xp[data-theme="respirando"] .xm-col__items { margin: 0; padding-left: 1.1em; font-family: var(--x-sans); font-size: clamp(0.95rem, 1.45vw, 1.65rem); line-height: 1.45; color: var(--ink); }

/* ─── El arco del viaje (Canva p. 27) ──────────────────────────── */
.xp[data-theme="respirando"] .xm-journey { width: min(100%, 1180px); margin: clamp(14px, 3vh, 36px) auto 0; padding: clamp(12px, 2.5vh, 28px) clamp(12px, 2vw, 32px); background: #0c0c0b; }
.xp[data-theme="respirando"] .xm-journey svg { display: block; width: 100%; height: auto; overflow: visible; }
.xp[data-theme="respirando"] .xm-journey__curve { fill: none; stroke: var(--x-gold); stroke-width: 2.2; }
.xp[data-theme="respirando"] .xm-journey__base { stroke: rgba(176, 143, 94, 0.35); stroke-width: 1; }
.xp[data-theme="respirando"] .xm-journey__drop { stroke: rgba(176, 143, 94, 0.3); stroke-width: 1; stroke-dasharray: 3 4; }
.xp[data-theme="respirando"] .xm-journey circle { fill: #0c0c0b; stroke: var(--x-cream); stroke-width: 1.5; }
.xp[data-theme="respirando"] .xm-journey text { fill: var(--x-cream); font: 600 13px var(--x-sans); letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; }
.xp[data-theme="respirando"] .xm-journey__phases { list-style: none; margin: clamp(10px, 2vh, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xp[data-theme="respirando"] .xm-journey__phases li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px; text-align: center; font-family: var(--x-sans); color: var(--x-cream); }
.xp[data-theme="respirando"] .xm-journey__phases li + li { border-left: 1px solid rgba(176, 143, 94, 0.3); }
.xp[data-theme="respirando"] .xm-journey__n { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--x-gold); border-radius: 50%; font-size: 12px; color: var(--x-gold); }
.xp[data-theme="respirando"] .xm-journey__phases b { font-family: var(--x-display); font-weight: 600; font-size: clamp(0.85rem, 1.1vw, 1.2rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-gold); }
.xp[data-theme="respirando"] .xm-journey__phases span:last-child { font-size: clamp(0.7rem, 0.85vw, 0.9rem); color: rgba(237, 231, 221, 0.75); }

/* ─── Imágenes de la Canva ─────────────────────────────────────── */
/* Fondo blanco de origen (A13, A15): desaparece sobre el papel, como en Canva. */
.xp[data-theme="respirando"] .xm-asset--blend-multiply img { mix-blend-mode: multiply; }
.xp[data-theme="respirando"] .xm-asset--top { top: 6vh; }
.xp[data-theme="respirando"] .xm-asset--bottom { left: 50%; bottom: 10vh; top: auto; transform: translateX(-50%); }
/* Infografías completas (A16–A18): la imagen es la lámina. */
.xp[data-theme="respirando"] .xm-asset--full { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(96vw, calc(94vh * 16 / 9)); max-width: none; }
.xp[data-theme="respirando"] .xm-asset--full img { max-height: 94vh; }

/* ─── Sala de espera (Canva p. 1): ojo a la izquierda, cuenta a la derecha ─── */
.xp[data-theme="respirando"] .xm:has(.xm-countdown) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: center; }
.xp[data-theme="respirando"] .xm:has(.xm-countdown) .xm-body { align-self: center; align-items: center; }
.xp[data-theme="respirando"] .xm:has(.xm-countdown) .xm-foot { align-self: center; align-items: center; }
.xp[data-theme="respirando"] .xm:has(.xm-countdown) .xm-video { width: clamp(200px, 30vw, 560px); }
.xp[data-theme="respirando"] .xm-countdown__label { font-family: var(--x-display); font-style: italic; font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 3.6rem); color: var(--x-gold); }
.xp[data-theme="respirando"] .xm-countdown__time { font-family: var(--x-sans); font-weight: 800; font-size: clamp(3.6rem, 12vw, 13rem); letter-spacing: 0.01em; color: #fff; }

/* ─── Portada de sesión (Canva p. 2): RESPIRANDO / CON-CIENCIA / «tema» ─── */
.xp[data-theme="respirando"] .xm-brand__halo { display: none; }
.xp[data-theme="respirando"] .xm-brand__title { font-family: var(--x-display); font-weight: 700; letter-spacing: 0.02em; color: var(--x-gold); font-size: clamp(2.4rem, 6.4vw, 7.6rem); line-height: 1.05; text-transform: uppercase; }
.xp[data-theme="respirando"] .xm-brand__title span:first-child { font-style: italic; }
.xp[data-theme="respirando"] .xm-brand__title span + span { font-size: 0.72em; }
.xp[data-theme="respirando"] .xm-brand__lines { margin-top: 0.4em; font-family: var(--x-display); font-style: normal; font-weight: 700; text-transform: uppercase; color: var(--x-gold); font-size: clamp(1rem, 1.9vw, 2.2rem); }

/* ─── Móvil: una columna, la figura arriba y más chica ─────────── */
@media (max-width: 760px) {
  .xp[data-theme="respirando"] .xm-split--left, .xp[data-theme="respirando"] .xm-split--right { flex-direction: column; gap: 20px; }
  .xp[data-theme="respirando"] .xm-split--right .xm-figure { order: -1; }
  .xp[data-theme="respirando"] .xm[data-comp="left"] .xm-text, .xp[data-theme="respirando"] .xm[data-comp="right"] .xm-text { align-items: center; text-align: center; }
  .xp[data-theme="respirando"] .xm-glyph svg, .xp[data-theme="respirando"] .xm-glyph img, .xp[data-theme="respirando"] .xm-glyph--ojo-llave img { width: 110px; }
  .xp[data-theme="respirando"] .xm-glyph--box { width: 150px; }
  .xp[data-theme="respirando"] .xm-orb { width: 120px; }
  .xp[data-theme="respirando"] .xm-sides { grid-template-columns: 1fr; gap: 14px; }
  .xp[data-theme="respirando"] .xm-columns { grid-template-columns: 1fr; gap: 14px; }
  .xp[data-theme="respirando"] .xm-col__title { font-size: 1.3rem; margin-bottom: 0.1em; }
  .xp[data-theme="respirando"] .xm-col__items { display: flex; flex-wrap: wrap; gap: 0 1em; padding: 0; list-style: none; justify-content: center; font-size: 0.85rem; }
  .xp[data-theme="respirando"] .xm-journey__phases { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .xp[data-theme="respirando"] .xm-journey text { font-size: 22px; }
  .xp[data-theme="respirando"] .xm:has(.xm-countdown) { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
  .xp[data-theme="respirando"] .xm-asset--full { width: 100vw; }
}

/* ─── Composiciones de la Canva: título arriba con imagen abajo (top) o al revés (bottom) ─── */
.xp[data-theme="respirando"] .xm[data-comp="top"] .xm-body { align-self: start; align-items: center; text-align: center; margin-top: 2vh; }
.xp[data-theme="respirando"] .xm[data-comp="bottom"] .xm-body { align-self: end; align-items: center; text-align: center; margin-bottom: 1vh; }
.xp[data-theme="respirando"] .xm[data-comp="top"] .xm-foot, .xp[data-theme="respirando"] .xm[data-comp="bottom"] .xm-foot { align-items: center; text-align: center; }
.xp[data-theme="respirando"] .xm-hero b, .xp[data-theme="respirando"] .xm-sides b { font-weight: 700; }

/* {texto} en los datos: se respeta tal cual (pH, CO₂) aunque el título vaya en mayúsculas. */
.xp[data-theme="respirando"] .xm-nc { text-transform: none; }
/* Imagen entre el título y la pregunta del pie (Canva p. 22). */
.xp[data-theme="respirando"] .xm-asset--lower { left: 50%; bottom: 19vh; top: auto; transform: translateX(-50%); }
.xp[data-theme="respirando"] .xm-asset--lower img { max-height: 30vh; width: auto; margin: 0 auto; }