/* UTN.BA demo page. Four stops on white: the video, the same scene to switch on, the price, the footer.
   Single light theme on purpose (UTN white + bordó): color-scheme is light and there is no dark variant,
   so an OS in dark mode still gets the page as designed. */
:root{
  color-scheme:light;
  --paper:#ffffff; --surface:#f6f4f4; --line:#e8e3e3; --ink:#1d1b1b; --text:#424242; --muted:#6a6565;
  --accent:#b2223b; --accent-soft:#f7eaec; --screen:#141213; --screen-fg:#efeaea; --ok:#2e7d4f; --err:#a3202f;
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--display);color:var(--ink);margin:0;text-wrap:balance;font-stretch:88%}
p{margin:0}
button{font:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* header: original logotipo on white, never under 140 px wide */
header.top{border-bottom:1px solid var(--line);background:var(--paper)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:block;width:160px;min-width:140px;height:auto}
.by{font:500 12.5px var(--mono);color:var(--muted);text-align:right}

/* hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px)}
.hero .wrap{display:grid;gap:22px}
.hero h1{font-size:clamp(36px,6.2vw,76px);line-height:1;font-weight:800;letter-spacing:-.02em;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);max-width:52ch}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.seg button{font:600 13.5px var(--body);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cc{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--body);color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer}
.cc .tag{font:700 11px/1 var(--mono);border:1.5px solid currentColor;border-radius:4px;padding:2px 4px}
.cc[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.cc[aria-pressed="true"] .tag{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cc:disabled{opacity:.5;cursor:not-allowed}
.stage{display:grid;place-items:center;background:var(--surface);border-radius:20px;padding:clamp(12px,3vw,32px)}
.screen{position:relative;width:100%;aspect-ratio:16/9;background:var(--screen);border-radius:14px;overflow:hidden}
.screen video{display:block;width:100%;height:100%;object-fit:contain;background:var(--screen)}
.stage.v .screen{width:min(340px,100%);aspect-ratio:9/16;border-radius:30px;box-shadow:0 0 0 10px var(--ink)}
.pending{position:absolute;inset:auto 0 0 0;padding:10px 14px;font:500 12.5px var(--mono);color:var(--screen-fg);background:linear-gradient(transparent,#000000a6);pointer-events:none;display:none}
.stage.missing .pending{display:block}

/* sections */
section{padding-block:clamp(56px,8vw,96px)}
.head{display:grid;gap:10px;margin-bottom:clamp(24px,4vw,40px)}
.head h2{font-size:clamp(30px,4.4vw,50px);line-height:1.02;font-weight:800;letter-spacing:-.015em}

/* interactive scene */
.try{background:var(--surface)}
.lab{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.board{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0}
.board svg{display:block;width:100%;height:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ring-hint,.ring-focus{stroke:var(--accent);stroke-width:2.5}
.ring-hint{stroke-dasharray:6 5;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{stroke-opacity:.25}}
.flow{animation:flow .55s linear infinite}
@keyframes flow{to{stroke-dashoffset:-6.2}}
.side{display:grid;gap:10px;min-width:0}
.dock{display:grid;gap:10px}
.steps{display:grid;gap:10px}
.step{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;font:600 15px var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;touch-action:manipulation}
.step .n{font:600 12px var(--mono);color:var(--muted);width:18px;flex:none}
.step .st{margin-left:auto;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.step[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.step[aria-pressed="true"] .st{color:var(--accent)}
@media (hover:hover){.step:hover{border-color:var(--muted)}.step[aria-pressed="true"]:hover{border-color:var(--accent)}}
.fault{font:600 14px var(--body);color:var(--text);background:transparent;border:1px dashed var(--muted);border-radius:12px;padding:12px 14px;min-height:48px;cursor:pointer;width:100%}
@media (hover:hover){.fault:hover{border-style:solid;color:var(--ink)}}
.say{min-height:3.2em;font-size:14.5px;color:var(--ink);border-left:3px solid var(--accent);padding:2px 0 2px 12px}
.norma{font:500 12.5px var(--mono);color:var(--muted)}
.norma b{color:var(--ok)}
.norma.fail{color:var(--err)} .norma.fail b{color:var(--err)}
.norma ul{margin:6px 0 0;padding-left:18px}

/* tablet: scene full width, steps in a row below */
@media (max-width:859px){
  .lab{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* phone: vertical scene (the video's portrait layout); the steps sit right under it, and the scene is sized so
   scene + steps fit one screen: the thumb reaches them without scrolling away from the lamp */
@media (max-width:719px){
  .lab{gap:12px}
  .board{max-width:440px;width:100%;justify-self:center}
  /* scene + dock fit one screen: the svg letterboxes (meet) and the wall drawing fills the extra width */
  .board svg{max-height:calc(100svh - 210px);min-height:420px}
  .side{display:contents}
  /* in the flow right under the scene (not sticky): a sticky dock showed up over the video as soon as the section started */
  .dock{gap:8px}
  .say{min-height:2.9em;font-size:14px;line-height:1.45}
  .steps{gap:8px}
  .step{flex-direction:column;align-items:flex-start;gap:2px;min-height:68px;padding:9px 10px;font:600 15px/1.2 var(--display);font-stretch:76%}
  .step .n{width:auto;font-size:11px}
  .step .st{margin-left:0;font-size:10.5px;letter-spacing:.04em}
}

@media (max-width:379px){.step{font-size:14px;padding-inline:8px}}

/* price */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line)}
th{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;color:var(--ink)}
td.dur{font:500 14px var(--mono);color:var(--muted);white-space:nowrap}
td.price,th.price{text-align:right;white-space:nowrap}
td.price{font:500 14px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
tr.once td{background:var(--accent-soft)}
/* terms strip: closes the price card, two items side by side (stacked on phones) */
.terms{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);background:var(--surface)}
.term{display:flex;align-items:flex-start;gap:14px;margin:0;padding:18px 20px;font-size:14px;line-height:1.45;color:var(--muted)}
.term + .term{border-left:1px solid var(--line)}
.term strong{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}
.term .ico,.term .flag{flex:none;margin-top:2px}
.term .ico{fill:none;stroke:var(--muted);stroke-width:1.6}
.flag{border-radius:3px;box-shadow:0 0 0 1px var(--line)}
@media (max-width:639px){
  .terms{grid-template-columns:1fr}
  .term + .term{border-left:0;border-top:1px solid var(--line)}
  .term{padding:14px}
}
@media (max-width:479px){
  table{font-size:15px}
  /* phone: each row stacks the name over duration + price, so names don't wrap word by word */
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line)}
  tbody tr:last-child{border-bottom:0}
  tbody td{border-bottom:0;padding:0 14px}
  tbody td:first-child{grid-column:1/-1;padding-top:14px;padding-bottom:4px}
  tbody td.dur,tbody td.price{padding-bottom:14px}
}

footer{border-top:1px solid var(--line)}
footer .wrap{padding-block:22px;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}