/* ==========================================================================
   ZOSMA — alma: ritmo y energía. Cartel tipográfico enorme, latido (ECG), kiosko real,
   cinta de accesos y funcionalidades numeradas como una rutina de entrenamiento.
   ========================================================================== */
body.zs { --c: #0f766e; --cg: #5eead4; }

.hp.zs { text-align: left; align-items: stretch; padding: 0 clamp(18px, 4vw, 56px); min-height: calc(100svh - var(--hdr) - 14px); justify-content: flex-start;
  background: radial-gradient(120% 80% at 55% 128%, #4fe3d0 0%, #17ad9c 18%, #0f766e 38%, #0a4c47 62%, #04201d 100%); }
.hp.zs::after { background: radial-gradient(ellipse at 50% 100%, rgba(224,255,248,1), rgba(150,244,226,.5) 34%, transparent 70%); }
.zs-top { position: relative; z-index: 3; padding-top: clamp(26px, 5vh, 56px); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp.zs .zs-words { position: relative; z-index: 3; margin: clamp(10px, 3vh, 34px) 0 0; max-width: none; font-weight: 800; text-transform: uppercase; letter-spacing: -.055em; line-height: .86; font-size: clamp(2.6rem, 9.6vw, 9.4rem); display: flex; gap: .16em; flex-wrap: wrap; color: #fff; white-space: nowrap; }
.zs-words span { display: inline-block; animation: wordIn 1s var(--ease) both; }
.zs-words span:nth-child(2) { color: transparent; -webkit-text-stroke: clamp(1.5px, .22vw, 3px) rgba(255,255,255,.9); animation-delay: .12s; }
.zs-words span:nth-child(3) { color: #b9fbef; animation-delay: .24s; }
@keyframes wordIn { from { opacity: 0; transform: translateY(40px) skewY(3deg); } }
.zs-ecg { position: absolute; z-index: 2; left: 0; right: 0; top: 26%; height: 120px; opacity: .55; pointer-events: none; }
.zs-ecg path { fill: none; stroke: #d6fff7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360 1640; animation: ecg 3.4s linear infinite; filter: drop-shadow(0 0 6px rgba(214,255,247,.8)); }
.zs-ecg path.base { stroke: rgba(255,255,255,.18); stroke-dasharray: none; animation: none; filter: none; }
@keyframes ecg { from { stroke-dashoffset: 360; } to { stroke-dashoffset: -2000; } }
.zs-row > * { min-width: 0; }
.zs-row { position: relative; z-index: 3; display: grid; grid-template-columns: .8fr 1.25fr; gap: clamp(20px, 3vw, 50px); align-items: end; margin-top: clamp(20px, 4vh, 44px); flex: 1; }
.zs-copy { display: grid; gap: 1.4rem; align-self: center; padding-bottom: clamp(18px, 4vh, 48px); }
.zs-copy .lead { color: rgba(255,255,255,.88); font-size: clamp(1.15rem, 1.4vw, 1.4rem); }
.zs-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.zs-facts { display: flex; gap: 14px 30px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.28); }
.zs-facts b { font-family: 'Geist Mono', monospace; font-size: 1.15rem; font-weight: 500; letter-spacing: -.03em; display: block; } .zs-facts span { font-size: .78rem; color: rgba(255,255,255,.7); }
.zs-kiosk { position: relative; margin: 0 -2% -150px 0; perspective: 1700px; }
.zs-kiosk .tag { position: absolute; left: 14px; top: -14px; z-index: 4; font: 500 .68rem 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; background: #fff; color: #0f766e; padding: 5px 11px; border-radius: 99px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.45); }
@media (max-width: 900px) { .zs-row { grid-template-columns: 1fr; } .zs-kiosk { margin: 0 -2% -70px; } .zs-words { white-space: normal; font-size: clamp(3rem, 15vw, 6rem); } .zs-ecg { top: 18%; } }

/* ---------- Cinta de accesos ---------- */
.zs-belt { background: #04201d; color: #b9fbef; overflow: hidden; border-block: 1px solid #0f766e; margin-top: 0; padding: 16px 0; }
.zs-belt .track { display: flex; gap: 46px; width: max-content; animation: belt 38s linear infinite; font: 500 .8rem 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.zs-belt .track span { display: inline-flex; gap: 12px; align-items: center; } .zs-belt .track i { width: 7px; height: 7px; border-radius: 50%; background: #5eead4; } .zs-belt .track em { font-style: normal; color: #5eead4; }
.zs-belt .track b { font-weight: 500; color: #fff; } .zs-belt .track .no i { background: #f87171; } .zs-belt .track .no em { color: #f87171; }
@keyframes belt { to { transform: translateX(-50%); } }

/* ---------- Panel (menta) ---------- */
.zs-mint { background: #e9f7f2; }
.zs-dash { display: grid; grid-template-columns: 1fr; gap: 26px; }
.zs-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px dashed #8fcfc4; background: rgba(255,255,255,.5); }
.zs-callouts > div { padding: 22px 24px; border-left: 1px dashed #8fcfc4; display: grid; gap: 6px; }
.zs-callouts > div:first-child { border-left: 0; }
.zs-callouts b { font-family: 'Geist Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #0f766e; font-weight: 500; }
.zs-callouts span { color: #1f4b46; font-family: var(--serif); font-size: 1.12rem; line-height: 1.38; }
@media (max-width: 800px) { .zs-callouts { grid-template-columns: 1fr; } .zs-callouts > div { border-left: 0; border-top: 1px dashed #8fcfc4; } .zs-callouts > div:first-child { border-top: 0; } }
.zs-act { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 6vw, 80px); }
.zs-act h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; line-height: 1.05; }
.zs-bell { display: grid; gap: 10px; }
.zs-alert { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid #b9e3da; border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(15,118,110,.5); opacity: 0; transform: translateX(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.zs-alert.in { opacity: 1; transform: none; }
.zs-alert svg { width: 20px; height: 20px; flex: none; color: #0f766e; }
.zs-alert b { display: block; font-weight: 600; } .zs-alert small { color: #5b7f79; font-size: .84rem; }
.zs-alert .t { margin-left: auto; font: 500 .7rem 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 99px; background: #fef3c7; color: #b45309; white-space: nowrap; } .zs-alert .t.r { background: #fee2e2; color: #c12425; } .zs-alert .t.g { background: #d1fae5; color: #047857; }
@media (max-width: 900px) { .zs-act { grid-template-columns: 1fr; } }

/* ---------- Funcionalidades numeradas ---------- */
.zs-n { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid #0f766e; }
.zs-n > div { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; padding: 30px 8px 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.zs-n > div:nth-child(even) { padding-left: 34px; border-left: 1px solid var(--line); }
.zs-n .no { font: 500 3.2rem 'Geist Mono', monospace; letter-spacing: -.08em; color: #0f766e; line-height: .9; grid-row: span 2; opacity: .9; }
.zs-n h3 { font-size: 1.35rem; letter-spacing: -.03em; font-weight: 600; }
.zs-n p { color: var(--mut); font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; }
@media (max-width: 800px) { .zs-n { grid-template-columns: 1fr; } .zs-n > div:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ---------- Matriz de planes ---------- */
.zs-matrix { overflow-x: auto; border: 1px dashed #8fcfc4; background: #fff; }
.zs-matrix table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .94rem; }
.zs-matrix th, .zs-matrix td { padding: 14px 16px; text-align: center; border-bottom: 1px solid #e5efec; }
.zs-matrix th:first-child, .zs-matrix td:first-child { text-align: left; }
.zs-matrix thead th { font: 500 .72rem 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #0f766e; border-bottom: 2px solid #0f766e; vertical-align: bottom; }
.zs-matrix thead th b { display: block; font: 500 1.9rem 'Geist Mono', monospace; letter-spacing: -.06em; color: var(--ink); margin-top: 6px; text-transform: none; } .zs-matrix thead th small { display: block; font-family: 'Geist', sans-serif; letter-spacing: 0; text-transform: none; color: var(--mut); font-size: .76rem; }
.zs-matrix tbody td:first-child { color: var(--ink2); font-weight: 500; }
.zs-matrix .y { color: #0f766e; font-weight: 700; } .zs-matrix .n { color: #c9c3b2; }
.zs-matrix tbody tr:hover td { background: #f3fbf8; }
.zs-matrix .cap td { background: #f3fbf8; font-family: 'Geist Mono', monospace; }
.still .hp.zs { min-height: 860px; }
.zs-dash { grid-template-columns: minmax(0, 1fr); } .zs-dash > * { min-width: 0; }
.zs-mint .container > *, .section .container > * { min-width: 0; }