/* Practica: técnicas y círculo guiado (meditacion.js) */
.practice {
  background:
    radial-gradient(ellipse at 15% 10%, #3f7a4a26, transparent 55%),
    radial-gradient(ellipse at 90% 90%, #7650d21f, transparent 60%),
    #17142a;
  border-top: 1px solid #8fdc5f2e;
}
.practice-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 26px;
}
.practice-heading > p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
}
.practice-streak {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid #8fdc5f;
  border-radius: 0 8px 8px 0;
  background: #8fdc5f14;
  color: var(--fg);
  font-size: 15px;
}
.practice-streak span { color: var(--muted); font-size: 13px; }
.practice-grid {
  display: grid;
  grid-template-columns: minmax(250px, 320px) 1fr;
  gap: 22px;
  align-items: start;
}
.tech-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tech-group {
  margin: 14px 0 4px;
  color: var(--lime);
  font: 700 13px "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.tech-group:first-child { margin-top: 0; }
.tech-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  background: #ffffff08;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.tech-item strong { font: 700 16px "Roboto Slab", Georgia, serif; }
.tech-item span { color: var(--muted); font-size: 13px; }
.tech-item:hover { background: #ffffff12; }
.tech-item[aria-selected="true"] {
  border-color: var(--lime);
  background: #d5e04b17;
}
.tech-item:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tech-detail {
  padding: clamp(22px, 4vw, 38px);
  border: 2px solid #0f0b1a;
  border-radius: 10px;
  background: #2b2342;
  box-shadow: 7px 7px 0 #100c1d;
}
.tech-detail .eyebrow { margin: 0 0 8px; }
.tech-detail h3 {
  margin: 0 0 12px;
  font: 800 clamp(28px, 3.4vw, 40px)/1.1 "Roboto Slab", Georgia, serif;
  color: var(--fg);
}
.tech-pattern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.tech-pattern span {
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 13px;
  color: #17121f;
}
.tech-pattern .ph-in, .tech-pattern .ph-in2 { background: #8fdc5f; }
.tech-pattern .ph-hold { background: #f8c646; }
.tech-pattern .ph-out { background: #b79bff; }
.tech-pattern .ph-rest { background: #a4a7b3; }
.tech-lead { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--fg); }
.tech-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 24px;
  padding: 14px;
  border-radius: 10px;
  background: #00000026;
}
.tech-lengths { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-lengths button {
  padding: 8px 13px;
  border: 1px solid #ffffff2e;
  border-radius: 99px;
  background: transparent;
  color: var(--fg);
  font: 600 14px "DM Sans", Arial, sans-serif;
  cursor: pointer;
}
.tech-lengths button[aria-pressed="true"] { border-color: var(--lime); background: var(--lime); color: #17121f; }
.tech-fixed { margin: 0; color: var(--muted); }
.tech-go { margin-left: auto; min-width: 150px; }
.tech-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 26px;
}
.tech-cols h4 {
  margin: 0 0 8px;
  color: var(--lime);
  font: 700 14px "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.tech-cols p, .tech-cols li { color: #ddd6e8; font-size: 15px; line-height: 1.6; }
.tech-cols p { margin: 0 0 16px; }
.tech-cols ol { margin: 0; padding-left: 20px; }
.tech-cols li { margin-bottom: 8px; }
.tech-care {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8c64614;
}
.practice-more {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  margin-top: 26px;
}
.practice-hacks, .practice-care {
  padding: 22px 24px;
  border-radius: 10px;
  background: #ffffff08;
  border: 1px solid #ffffff12;
}
.practice-hacks ol {
  margin: 10px 0 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 30px;
}
.practice-hacks li, .practice-care li {
  margin-bottom: 10px;
  color: #ddd6e8;
  font-size: 15px;
  line-height: 1.5;
  break-inside: avoid;
}
.practice-hacks strong { color: var(--fg); }
.practice-care { background: #f8c6460d; border-color: #f8c6462e; }
.practice-care ul { margin: 10px 0 0; padding-left: 18px; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .practice-heading { display: block; }
  .practice-heading > p { margin-top: 14px; }
  .practice-grid { grid-template-columns: 1fr; }
  .tech-list { display: grid; grid-template-columns: 1fr 1fr; }
  .tech-group { grid-column: 1 / -1; }
  .tech-item span { display: none; }
  .tech-item strong { font-size: 15px; }
  .tech-cols, .practice-more { grid-template-columns: 1fr; }
  .practice-hacks ol { columns: 1; }
  .tech-go { margin-left: 0; width: 100%; }
}

/* ───── Sesión a pantalla completa ───── */
.practice-session {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--fg);
  background:
    radial-gradient(ellipse at 50% 42%, #2c5a3a66, transparent 62%),
    radial-gradient(ellipse at 50% 100%, #3a2a6e80, transparent 70%),
    #0d0b17;
  overflow: hidden;
}
.practice-session::backdrop { background: #07050ef2; }
.practice-session[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ps-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(760px, 100%);
  padding: 18px 20px 6px;
}
.ps-name {
  margin: 0;
  color: var(--lime);
  font: 700 15px "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.ps-top .ps-close {
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
}
.ps-bar {
  width: min(720px, calc(100% - 40px));
  height: 3px;
  border-radius: 3px;
  background: #ffffff1a;
  overflow: hidden;
}
.ps-bar span { display: block; height: 100%; width: 0; background: var(--lime); }
.ps-live, .ps-end {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 10px 20px 26px;
  text-align: center;
}
.ps-live[hidden], .ps-end[hidden] { display: none; }
.ps-stage {
  position: relative;
  width: min(78vw, 46dvh, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.practice-session[data-type="count"] .ps-stage { cursor: pointer; }
.ps-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ps-track { fill: none; stroke: #ffffff17; stroke-width: 3; }
.ps-prog {
  fill: none;
  stroke: var(--lime);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 653.45;
  stroke-dashoffset: 653.45;
  transition: stroke 0.25s;
}
.ps-orb {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  transform: scale(0.42);
  will-change: transform;
  background: radial-gradient(circle at 38% 32%, #e9ffd6 0%, #8fdc5f 32%, #2f7a4f 70%, #173a2a 100%);
  box-shadow: 0 0 60px #8fdc5f55, inset 0 0 40px #ffffff22;
  transition: background 0.8s, box-shadow 0.8s;
}
.ps-stage[data-phase="hold"] .ps-orb {
  background: radial-gradient(circle at 38% 32%, #fff6d0 0%, #f8c646 34%, #a8761c 72%, #4a3410 100%);
  box-shadow: 0 0 80px #f8c64666, inset 0 0 40px #ffffff22;
}
.ps-stage[data-phase="hold"] .ps-prog { stroke: #f8c646; }
.ps-stage[data-phase="out"] .ps-orb {
  background: radial-gradient(circle at 38% 32%, #efe6ff 0%, #b79bff 32%, #6142b8 70%, #2a1d57 100%);
  box-shadow: 0 0 60px #b79bff55, inset 0 0 40px #ffffff22;
}
.ps-stage[data-phase="out"] .ps-prog { stroke: #b79bff; }
.ps-stage[data-phase="rest"] .ps-orb {
  background: radial-gradient(circle at 38% 32%, #d7d9e4 0%, #8d90a3 40%, #3e4054 100%);
  box-shadow: 0 0 30px #8d90a333;
}
.ps-stage[data-phase="rest"] .ps-prog { stroke: #a4a7b3; }
.ps-stage[data-phase="prep"] .ps-orb,
.ps-stage[data-phase="guide"] .ps-orb,
.ps-stage[data-phase="free"] .ps-orb,
.ps-stage[data-phase="end"] .ps-orb {
  background: radial-gradient(circle at 38% 32%, #e3f6ff 0%, #7cc9d8 34%, #2e6a7d 72%, #12303b 100%);
  box-shadow: 0 0 60px #7cc9d844, inset 0 0 40px #ffffff22;
}
.ps-stage[data-phase="guide"] .ps-prog,
.ps-stage[data-phase="free"] .ps-prog { stroke: #7cc9d8; }
.ps-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  text-shadow: 0 2px 10px #000a;
}
.ps-phase {
  font: 700 clamp(20px, 3.4vw, 26px) "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ps-count {
  font: 800 clamp(54px, 10vw, 78px)/1 "Roboto Slab", Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.ps-count:empty { display: none; }
.ps-hint { min-height: 1.2em; font-size: 15px; color: #f0f0f3d9; }
.ps-step {
  min-height: 2.8em;
  max-width: 560px;
  margin: 4px 0 0;
  font: 600 clamp(18px, 2.6vw, 24px)/1.4 "Roboto Slab", Georgia, serif;
}
.practice-session[data-type="breath"] .ps-step {
  min-height: 0;
  color: var(--muted);
  font: 500 15px "DM Sans", Arial, sans-serif;
}
.ps-meta { margin: 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ps-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ps-controls button {
  padding: 10px 18px;
  border: 1px solid #ffffff33;
  border-radius: 99px;
  background: #ffffff0d;
  color: var(--fg);
  font: 600 15px "DM Sans", Arial, sans-serif;
  cursor: pointer;
}
.ps-controls button[aria-pressed="false"] { color: var(--muted); }
.ps-controls .primary { background: var(--lime); color: #17121f; border-color: var(--lime); }
.ps-controls button:focus-visible, .ps-top .ps-close:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.practice-session.paused .ps-stage { opacity: 0.55; }
.ps-end .ps-done { margin: 0; font: 800 clamp(34px, 6vw, 52px)/1.1 "Roboto Slab", Georgia, serif; }
.ps-summary { margin: 0; color: var(--lime); font-size: 17px; }
.ps-streak { margin: 0; font-size: 17px; }
.ps-ask { max-width: 460px; margin: 6px 0 10px; color: var(--muted); }
@media (max-height: 560px) {
  .ps-stage { width: min(60vw, 40dvh); }
  .ps-step { min-height: 0; font-size: 16px; }
}

/* Pestañas de Frases para el camino */
.quote-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.quote-tabs button {
  padding: 8px 15px;
  border: 1px solid #ffffff2e;
  border-radius: 99px;
  background: transparent;
  color: var(--fg);
  font: 600 14px "DM Sans", Arial, sans-serif;
  cursor: pointer;
}
.quote-tabs button:hover { border-color: var(--lime); }
.quote-tabs button[aria-selected="true"] {
  border-color: var(--lime);
  background: var(--lime);
  color: #17121f;
}
.quote-tabs button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }