/* ============================================================
   SECCIONES DE LA APP (beta · doc 09) · hoja COMPARTIDA de las
   4 páginas navegacionales: Prácticas · Evolución · Estadísticas
   · Perfil (precedente: registro.css sirve a sus 4 hermanas).
   Mismo lenguaje del home v4: cielo atmosférico + tipografía
   editorial que respira + placas SOLO donde corresponde.
   NAVY FIJO (--ent-*) · CSS clásico (sin `inset`) · animar solo
   transform/opacity · sin background-attachment:fixed (regla 7 jul).
   ============================================================ */
body.page-sx{
  min-height:100dvh; position:relative; overflow-x:hidden;
  background:
    radial-gradient(ellipse 92% 58% at 50% 12%, rgba(23,40,62,.6) 0%, transparent 62%),
    linear-gradient(180deg, var(--ent-navy) 0%, #050B14 100%);
  background-color:#050B14;
  color:var(--ent-cream);
}
.sx{
  position:relative; z-index:1;
  width:100%; max-width:440px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 26px) 26px 26px;
}

/* ── Cabecera editorial de sección ─────────────────────────── */
.sx-eyebrow{
  font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.8); margin-bottom:12px;
}
.sx-title{
  font-family:var(--font-serif); font-weight:400; font-size:30px;
  line-height:1.14; letter-spacing:-.015em; color:var(--ent-cream);
  text-wrap:balance; margin-bottom:10px;
  text-shadow:0 0 34px rgba(var(--ent-gold-rgb),.14);
}
.sx-title em{ font-style:italic; color:var(--ent-gold-bright); }
.sx-sub{
  font-family:var(--font-serif); font-style:italic; font-size:14.5px;
  line-height:1.6; color:var(--ent-slate); margin-bottom:30px;
  max-width:340px;
}

/* componentes comunes */
.sx-nota{
  font-family:var(--font-sans); font-size:12px; line-height:1.65;
  color:rgba(var(--ent-ink-rgb),.35); margin-top:22px;
}
.sx-btn-oro{
  display:inline-block; text-decoration:none; cursor:pointer; border:0;
  font-family:var(--font-sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  color:var(--ent-deep);
  background:linear-gradient(180deg, var(--ent-gold-bright) 0%, var(--ent-gold) 62%, #B7945A 100%);
  box-shadow:0 8px 26px rgba(var(--ent-gold-rgb),.2);
  padding:14px 24px; border-radius:0;
}
.sx-btn-ghost{
  display:inline-block; cursor:pointer; text-decoration:none;
  background:transparent; border:1px solid rgba(var(--ent-gold-rgb),.4);
  border-radius:0; padding:13px 22px;
  font-family:var(--font-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.9);
}
.sx-msg{
  font-family:var(--font-sans); font-size:12.5px; color:#D98A63;
  margin-top:12px; line-height:1.55;
}
.sx-msg.ok{ color:var(--ent-gold-bright); }
.sx-cargando{
  font-family:var(--font-sans); font-size:var(--fs-caption);
  color:rgba(var(--ent-ink-rgb),.4); padding:14px 0;
}

/* ════════ PRÁCTICAS · rediseño hifi (10 jul · handoff visual) ═══
   Glifo SVG animado en medallón + número de agua serif + tag con
   ala de hairline + botón central de ingreso por tarjeta. Mismo
   lenguaje del portal. CSS clásico (posición con top/left/right/
   bottom, jamás `inset`) · se animan solo transform/opacity. */
.page-px .sx{ padding-top:calc(env(safe-area-inset-top) + 22px); }
.page-px .sx-sub{ margin-bottom:24px; max-width:330px; }
.px-head{ animation:pxRise .7s cubic-bezier(.16,1,.3,1) both; }

.px-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.14),
    0 22px 50px -30px rgba(0,0,0,.75);
  padding:24px 22px 22px; margin-bottom:16px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
  animation:pxRise .7s cubic-bezier(.16,1,.3,1) both;
}
.px-card:nth-of-type(1){ animation-delay:.06s; }
.px-card:nth-of-type(2){ animation-delay:.16s; }
.px-card:nth-of-type(3){ animation-delay:.26s; }
.px-card:hover{ transform:translateY(-3px); border-color:rgba(var(--ent-gold-rgb),.42); }

/* acento superior · hairline dorada de borde a borde */
.px-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(var(--ent-gold-rgb),.55), transparent);
}

/* ── DOS MATERIALES · superficie navy vs superficie tintada en oro (idea C ·
   14 jul · Rodrigo, CORREGIDO). MISMO peso visual: el medallón, la hairline
   superior, el glow y el hover son IDÉNTICOS en ambas (heredan de .px-card) —
   así ninguna se lee como "activa" y otra "apagada". Solo cambia la SUPERFICIE
   con un tinte de oro tenue (modelo del dashboard: hm-jr / hm-ps), para dar
   RITMO al bajar. La usan la carta de Journaling y las prácticas pares (px-warm). */
.px-card-jrn,
.px-card.px-warm{
  /* Estilo Pre-sesión pero SÓLIDO y SIN luminosidad extra (Rodrigo 14 jul):
     base navy un punto MÁS oscura que la card navy + un velo de oro muy tenue
     = mismo peso oscuro que la navy, con undertone cálido. NO translúcido, así
     no deja pasar la luz de la página (que era lo que la "prendía"). */
  background:
    linear-gradient(180deg, rgba(var(--ent-gold-rgb),.05), rgba(var(--ent-gold-rgb),.015)),
    linear-gradient(180deg, #060E1A 0%, #04090F 100%);
  border-color:rgba(var(--ent-gold-rgb),.28);
}
/* BOTÓN propio del estilo Pre-sesión: navy con borde de oro + texto crema.
   Cada estilo de card conserva SU botón (Rodrigo 14 jul): la navy usa el
   botón dorado del sistema (.px-cta por defecto); esta usa el de Pre-sesión.
   NO se toca el tag: el gold-bright que había era el "oro de más" que las
   hacía ver activadas — fuera. */
.px-card-jrn .px-cta,
.px-card.px-warm .px-cta{
  color:var(--ent-cream);
  background:linear-gradient(180deg, #1C2C42, #0A131F);
  border-color:rgba(var(--ent-gold-rgb),.55);
  box-shadow:none;
}
.px-card-jrn .px-cta:hover,
.px-card.px-warm .px-cta:hover{
  color:var(--ent-cream);
  background:linear-gradient(180deg, #24344C, #101A28);
  border-color:var(--ent-gold-bright);
}
/* número de agua serif */
.px-water{
  position:absolute; top:12px; right:18px; pointer-events:none;
  font-family:var(--font-serif); font-size:46px; line-height:1;
  color:rgba(var(--ent-gold-rgb),.12); font-variant-numeric:tabular-nums;
}

/* fila · medallón + bloque de texto */
.px-row{ position:relative; display:flex; align-items:flex-start; gap:16px; }
.px-med{ position:relative; flex:0 0 auto; width:66px; height:66px; }
.px-med-glow{
  position:absolute; top:-6px; left:-6px; right:-6px; bottom:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--ent-gold-rgb),.18), transparent 68%);
  animation:pxGlow 5s ease-in-out infinite;
}
.px-card:nth-of-type(2) .px-med-glow{ animation-delay:.6s; }
.px-card:nth-of-type(3) .px-med-glow{ animation-delay:1.2s; }
.px-med-ring{
  position:absolute; top:0; left:0; right:0; bottom:0; border-radius:50%;
  border:1px solid rgba(var(--ent-gold-rgb),.3);
  background:rgba(var(--ent-ink-rgb),.02);
}
.px-med-svg{
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
}

/* texto · el número de agua obliga a reservar la derecha */
.px-body{ flex:1; min-width:0; padding-top:2px; padding-right:42px; }
.px-tagrow{ display:flex; align-items:center; gap:11px; margin-bottom:7px; }
.px-tag{
  flex:none; font-family:var(--font-sans); font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.85);
}
.px-tagrow::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(var(--ent-gold-rgb),.3), transparent);
}
.px-name{
  font-family:var(--font-serif); font-weight:400; font-size:19.5px;
  color:var(--ent-cream); line-height:1.2; margin-bottom:6px;
}
.px-desc{
  font-family:var(--font-sans); font-size:12.5px; line-height:1.55;
  color:rgba(var(--ent-ink-rgb),.52); margin:0; text-wrap:pretty;
}

/* botón central de ingreso · separado por hairline */
.px-cta-wrap{
  margin-top:16px; padding-top:15px;
  border-top:1px solid rgba(var(--ent-ink-rgb),.08);
}
.px-cta{
  box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; text-decoration:none;
  font-family:var(--font-sans); font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ent-gold-bright);
  background:linear-gradient(180deg, rgba(var(--ent-gold-rgb),.16), rgba(var(--ent-gold-rgb),.06));
  border:1px solid rgba(var(--ent-gold-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(232,207,148,.15);
  padding:14px 18px;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.px-cta:hover{
  background:linear-gradient(180deg, rgba(var(--ent-gold-rgb),.28), rgba(var(--ent-gold-rgb),.14));
  border-color:var(--ent-gold-bright); color:var(--ent-cream);
}
.px-cta:active{ transform:translateY(1px); }
.px-cta-arrow{ font-size:13px; }

/* pie · nota tenue */
.px-nota{
  font-family:var(--font-sans); font-size:11.5px; line-height:1.65;
  color:rgba(var(--ent-ink-rgb),.32); margin:20px 0 0;
  text-align:center; text-wrap:pretty;
}

/* glifos del medallón (mismos de la sección web "Avance") */
.px-spin{ transform-box:view-box; transform-origin:33px 33px; animation:pxSpin 16s linear infinite; }
.px-pulse{ transform-box:view-box; transform-origin:33px 33px; animation:pxPulse 4s ease-in-out infinite; }
.px-flow{ stroke-dasharray:100; stroke-dashoffset:100; animation:pxFlow 3.4s ease-in-out infinite; }
.px-orbit{ transform-box:view-box; transform-origin:41px 25px; animation:pxOrbit 4.5s linear infinite; }

@keyframes pxRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes pxSpin{ to{ transform:rotate(360deg); } }
@keyframes pxFlow{ 0%{ stroke-dashoffset:100; } 50%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-100; } }
@keyframes pxOrbit{ 0%{ transform:translate(3px,1px); } 25%{ transform:translate(1px,-3px); } 50%{ transform:translate(-3px,-1px); } 75%{ transform:translate(-1px,3px); } 100%{ transform:translate(3px,1px); } }
@keyframes pxPulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.14); } }
@keyframes pxGlow{ 0%,100%{ opacity:.5; } 50%{ opacity:.95; } }

@media (prefers-reduced-motion:reduce){
  .px-head, .px-card{ animation:none; opacity:1; }
  .px-spin, .px-pulse, .px-orbit, .px-med-glow{ animation:none; }
  .px-flow{ animation:none; stroke-dashoffset:0; }
}

/* ════════ EVOLUCIÓN · el punto de partida ceremonial ═══════
   (compacta 8 jul · Rodrigo: glifo menor + espacios bien usados —
   sin scroll con intención de 1 línea; con intenciones largas el
   scroll es inevitable y está bien) */
.page-evo .sx{
  padding-top:calc(env(safe-area-inset-top) + 18px);
  display:flex; flex-direction:column;
  /* el bloque ceremonial se centra en el aire disponible — cero
     espacio muerto abajo (v3 · 8 jul); svh: estable con la barra */
  min-height:74vh;
  min-height:calc(100svh - 96px - env(safe-area-inset-bottom));
}
.page-evo .sx-title{ font-size:27px; margin-bottom:8px; }
.page-evo .sx-sub{ margin-bottom:14px; }
.page-evo #ev-cuerpo{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding-bottom:26px;
}
.ev-a{ text-align:center; padding-top:0; }
.ev-a-glyph{ width:88px; height:88px; margin:0 auto 20px; }
.ev-a-glyph svg{ width:88px; height:88px; overflow:visible; }
.eva-ripple{
  fill:none; stroke:var(--ent-gold); stroke-width:1.1; opacity:0;
  transform-box:view-box; transform-origin:60px 60px;
  animation:evaRipple 4.2s ease-out infinite;
}
.eva-r2{ animation-delay:1.4s; } .eva-r3{ animation-delay:2.8s; }
@keyframes evaRipple{ 0%{ transform:scale(.45); opacity:0; } 18%{ opacity:.55; } 100%{ transform:scale(2.3); opacity:0; } }
.eva-core{
  fill:none; stroke:var(--ent-gold-bright); stroke-width:1.4;
  transform-box:view-box; transform-origin:60px 60px;
  animation:evaCore 5.5s ease-in-out infinite;
}
.eva-dot{
  fill:var(--ent-gold-bright); transform-box:view-box; transform-origin:60px 60px;
  animation:evaDot 5.5s ease-in-out infinite;
}
@keyframes evaCore{ 0%,100%{ transform:scale(.9); opacity:.65; } 50%{ transform:scale(1.1); opacity:1; } }
@keyframes evaDot{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(var(--ent-gold-rgb),.5)); } 50%{ filter:drop-shadow(0 0 15px rgba(var(--ent-gold-rgb),.9)); } }
@media (prefers-reduced-motion:reduce){
  .eva-ripple{ animation:none; opacity:.35; }
  .eva-core,.eva-dot{ animation:none; }
}
.ev-a-titulo{
  font-family:var(--font-serif); font-size:23px; line-height:1.3;
  color:var(--ent-cream); text-wrap:balance; margin-bottom:9px;
}
.ev-a-titulo em{ font-style:italic; color:var(--ent-gold-bright); }
.ev-a-fecha{
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.7); margin-bottom:20px;
}
/* la intención · sus propias palabras como reliquia */
.ev-a-intencion{
  text-align:left; margin:0 auto 20px; max-width:352px;
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.14),
    0 26px 60px -34px rgba(0,0,0,.75);
  padding:18px 20px;
}
.ev-a-intencion-lbl{
  font-family:var(--font-sans); font-size:9.5px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.7); margin-bottom:11px;
}
.ev-a-intencion-txt{
  font-family:var(--font-serif); font-style:italic; font-size:16px;
  line-height:1.7; color:rgba(var(--ent-ink-rgb),.88);
}
.ev-a-intencion-txt::before{ content:'\00AB'; color:var(--ent-gold); font-style:normal; margin-right:4px; }
.ev-a-intencion-txt::after{ content:'\00BB'; color:var(--ent-gold); font-style:normal; margin-left:4px; }
.ev-a-adelante{
  font-family:var(--font-sans); font-size:12.5px; line-height:1.7;
  color:rgba(var(--ent-ink-rgb),.45); max-width:344px; margin:0 auto;
  text-wrap:balance;
}
.ev-a-adelante b{ font-weight:600; color:rgba(var(--ent-ink-rgb),.65); }
/* estado sin evaluación */
.ev-vacio{ text-align:left; }
.ev-vacio-txt{
  font-family:var(--font-sans); font-size:14px; line-height:1.7;
  color:rgba(var(--ent-ink-rgb),.55); margin-bottom:22px; max-width:330px;
}

/* ════════ ESTADÍSTICAS · los números de la constancia ═══════ */
.st-grid{
  display:flex; flex-wrap:wrap; margin-top:4px;
}
.st-cell{
  width:50%; padding:20px 8px 20px 0;
  border-bottom:1px solid rgba(var(--ent-ink-rgb),.08);
}
.st-cell:nth-child(odd){ border-right:1px solid rgba(var(--ent-ink-rgb),.08); }
.st-cell:nth-child(even){ padding-left:20px; }
.st-cell:nth-last-child(-n+2){ border-bottom:none; }
.st-num{
  font-family:var(--font-serif); font-size:34px; line-height:1;
  color:var(--ent-gold-bright); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin-bottom:7px;
  text-shadow:0 0 22px rgba(var(--ent-gold-rgb),.25);
}
.st-num i{ font-style:normal; font-family:var(--font-sans); font-size:13px; letter-spacing:.06em; color:rgba(var(--ent-gold-rgb),.7); margin-left:3px; }
.st-lbl{
  font-family:var(--font-sans); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--ent-ink-rgb),.5); margin-bottom:4px;
}
.st-sub{
  font-family:var(--font-sans); font-size:11.5px; line-height:1.5;
  color:rgba(var(--ent-ink-rgb),.32);
}
.st-sec{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-sans); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; font-weight:700; color:var(--ent-gold);
  margin:34px 0 4px;
}
.st-sec::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(var(--ent-gold-rgb),.3), transparent);
}
.st-row{
  display:flex; align-items:baseline; gap:14px;
  padding:15px 2px;
  border-bottom:1px solid rgba(var(--ent-ink-rgb),.07);
}
.st-row:last-of-type{ border-bottom:none; }
.st-row-name{
  flex:1; font-family:var(--font-serif); font-size:15.5px;
  color:rgba(var(--ent-ink-rgb),.85);
}
.st-row-val{
  font-family:var(--font-serif); font-size:17px; color:var(--ent-gold-bright);
  font-variant-numeric:tabular-nums;
}
.st-row-unit{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.08em;
  color:rgba(var(--ent-ink-rgb),.38);
}

/* ════════ PERFIL · identidad y acceso ══════════════════════ */
.pf-sec{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-sans); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; font-weight:700; color:var(--ent-gold);
  margin:28px 0 14px;
}
.pf-sec::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(var(--ent-gold-rgb),.3), transparent);
}
.pf-sec:first-of-type{ margin-top:0; }
.pf-field{ margin-bottom:18px; max-width:340px; }
.pf-field label{
  display:block; font-family:var(--font-sans); font-size:var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:rgba(var(--ent-gold-rgb),.75); margin-bottom:8px;
}
.pf-field input{
  width:100%; background:transparent; border:none;
  border-bottom:1px solid rgba(var(--ent-gold-rgb),.32);
  padding:11px 2px; color:var(--ent-cream);
  font-size:var(--fs-body); font-family:var(--font-serif);
  transition:border-color .2s;
}
.pf-field input:focus{ outline:none; border-bottom-color:var(--ent-gold-bright); }
.pf-field input::placeholder{ color:rgba(var(--ent-ink-rgb),.28); font-style:italic; }
.pf-correo{
  font-family:var(--font-sans); font-size:13.5px;
  color:rgba(var(--ent-ink-rgb),.55); margin-bottom:16px;
}
.pf-salir{
  background:transparent; border:0; cursor:pointer; padding:14px 0;
  font-family:var(--font-sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(var(--ent-ink-rgb),.42);
}
.pf-beta{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(var(--ent-ink-rgb),.25);
  margin-top:34px;
}

/* ════════ VISTA 360 DEL COACH (beta · 8 jul) ═══════════════ */
.sx-ancha{ max-width:560px; }
.co-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.co-volver{
  flex:none; font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:rgba(var(--ent-ink-rgb),.45); padding:12px 0;
}
.co-card{
  background:linear-gradient(180deg, #091627, #060E1B);
  border:1px solid rgba(var(--ent-gold-rgb),.18);
  box-shadow:
    inset 0 1px 0 rgba(var(--ent-gold-rgb),.12),
    0 24px 54px -32px rgba(0,0,0,.7);
  padding:20px 20px 18px; margin-bottom:16px;
}
.co-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.co-nombre{
  font-family:var(--font-serif); font-weight:400; font-size:19px;
  color:var(--ent-cream); line-height:1.25;
}
.co-tag-coach, .co-tag-prueba{
  font-family:var(--font-sans); font-size:9px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(var(--ent-gold-rgb),.8); font-style:normal;
}
.co-mail{ font-family:var(--font-sans); font-size:12px; color:rgba(var(--ent-ink-rgb),.4); margin-top:2px; }
.co-alta{
  flex:none; font-family:var(--font-sans); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(var(--ent-ink-rgb),.35);
}
.co-estado{
  display:flex; flex-wrap:wrap; gap:14px; padding:10px 0 4px;
  border-top:1px solid rgba(var(--ent-ink-rgb),.07);
  font-family:var(--font-sans); font-size:12px;
}
.co-estado .ok{ color:rgba(var(--ent-gold-rgb),.85); }
.co-estado .no{ color:rgba(var(--ent-ink-rgb),.4); }
.co-estado .tenue{ color:rgba(var(--ent-ink-rgb),.28); }
.co-act{
  font-family:var(--font-sans); font-size:12px; line-height:1.6;
  color:rgba(var(--ent-gold-rgb),.8); padding:8px 0 2px;
}
.co-act.tenue{ color:rgba(var(--ent-ink-rgb),.32); }
.co-ev{ margin-top:12px; padding:14px 16px; background:rgba(var(--ent-gold-rgb),.04); border:1px solid rgba(var(--ent-gold-rgb),.14); }
.co-ev-head{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.co-ev-tipo{
  font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ent-gold);
}
.co-ev-fecha{ font-family:var(--font-sans); font-size:11px; color:rgba(var(--ent-ink-rgb),.4); }
.co-ms{ display:flex; flex-wrap:wrap; }
.co-m{ width:50%; padding:8px 6px 8px 0; }
.co-m-v{
  font-family:var(--font-serif); font-size:22px; line-height:1;
  color:var(--ent-gold-bright); font-variant-numeric:tabular-nums; margin-bottom:3px;
}
.co-m.inv .co-m-v{ color:#D98A63; } /* carga: alto = peor · lectura al vistazo */
.co-m-v i{ font-style:normal; font-family:var(--font-sans); font-size:11px; color:rgba(var(--ent-ink-rgb),.4); margin-left:1px; }
.co-m-l{
  font-family:var(--font-sans); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:rgba(var(--ent-ink-rgb),.45);
}
.co-intencion{
  font-family:var(--font-serif); font-style:italic; font-size:14px; line-height:1.65;
  color:rgba(var(--ent-ink-rgb),.8); margin-top:10px;
  border-top:1px solid rgba(var(--ent-gold-rgb),.12); padding-top:12px;
}
.co-aspiracion{
  font-family:var(--font-sans); font-size:12px; color:rgba(var(--ent-ink-rgb),.45); margin-top:8px;
}

@media(min-width:768px){
  .sx{ max-width:560px; padding-top:52px; }
  .sx-title{ font-size:36px; }
  .sx-ancha{ max-width:680px; }
  .co-m{ width:25%; }
}

/* ═══ JOURNALING en Prácticas · separador (13 jul) ═══ */
.px-trv{
  display:flex; align-items:center; gap:14px; margin:30px 0 16px;
}
.px-trv .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(var(--ent-gold-rgb),.35)); }
.px-trv .line:last-child{ background:linear-gradient(90deg, rgba(var(--ent-gold-rgb),.35), transparent); }
.px-trv-lbl{
  font-family:var(--font-sans); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:rgba(var(--ent-ink-rgb),.5); white-space:nowrap;
}
.px-trv-lbl b{ color:var(--ent-gold); font-weight:600; }

/* v11 (13 jul) · Journaling PRIMERO como px-card real (misma gramática
   que las prácticas; se diferencia por tag, glifo y CTA). El separador
   queda DEBAJO, presentando las prácticas numeradas. */
/* borde/tag de Journaling ahora viven en el MATERIAL CÁLIDO (arriba) */
.px-card-jrn .px-desc em{ font-style:italic; color:rgba(var(--ent-ink-rgb),.68); }
.px-trv{ margin:4px 0 22px; }

/* v12 (13 jul) · glifo del péndulo (04 · Pendulación): la varilla se mece
   entre los polos, con su punto que respira. */
.px-swing{ transform-box:view-box; transform-origin:33px 12px; animation:pxSwing 4.6s ease-in-out infinite; }
@keyframes pxSwing{ 0%,100%{ transform:rotate(-16deg); } 50%{ transform:rotate(16deg); } }
@media (prefers-reduced-motion:reduce){ .px-swing{ animation:none; } }