:root{--ink:#111610;--green:#263b25;--forest:#111b12;--gold:#b78b43;--cream:#f6f2e9;--paper:#fffdfa;--muted:#687064;--line:#ddd7ca;--danger:#e12727}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.tutorial-nav{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;height:82px;padding:0 clamp(18px,6vw,86px);border-bottom:1px solid var(--line);background:#f6f2e9ee;backdrop-filter:blur(12px)}
.tutorial-brand{display:block;width:190px;height:70px}
.tutorial-brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
.home-link{font-size:13px;font-weight:700;color:#4d5d4c}
.tutorial-hero{padding:80px clamp(22px,10vw,150px) 70px;background:radial-gradient(circle at 78% 20%,#d8c29455 0 16%,transparent 38%),linear-gradient(135deg,#faf7f0,#eee7d9)}
.eyebrow{margin:0;color:#9b742f;font-size:11px;font-weight:800;letter-spacing:2.3px}
.tutorial-hero h1,.guide h2,.update-callout h2,.support h2{margin:14px 0;font-family:Georgia,serif;font-weight:400;line-height:1.04}
.tutorial-hero h1{font-size:clamp(44px,6vw,78px)}
.tutorial-hero h1 em{color:#57704e;font-weight:400}
.tutorial-hero>p:not(.eyebrow){max-width:760px;color:var(--muted);font-size:17px;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;text-align:center}
.primary{background:var(--green);color:white}
.secondary{border-color:#7d897a;color:#334332}
.tutorial-hero aside{max-width:820px;padding:18px 20px;border-left:4px solid var(--gold);background:#fff9;color:#596255;line-height:1.55}
.guide{padding:90px clamp(20px,8vw,120px)}
.guide-heading{display:flex;align-items:center;gap:24px;max-width:1120px;margin:0 auto 52px}
.guide-heading>span{display:grid;place-items:center;width:66px;height:66px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-family:Georgia,serif;font-size:25px}
.guide h2{font-size:clamp(36px,4vw,54px)}
.steps{display:grid;gap:54px;max-width:1120px;margin:0 auto;padding:0;list-style:none}
.step{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(280px,460px);align-items:center;gap:clamp(30px,8vw,110px);padding-bottom:54px;border-bottom:1px solid var(--line)}
.step:nth-child(even){grid-template-columns:minmax(280px,460px) minmax(240px,.8fr)}
.step:nth-child(even) .step-copy{grid-column:2}
.step:nth-child(even) .phone-shot{grid-row:1;grid-column:1}
.step-copy>span{color:#a47a36;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
.step-copy h3{margin:10px 0 12px;font-family:Georgia,serif;font-size:clamp(28px,3vw,39px);font-weight:400}
.step-copy p{margin:0;color:var(--muted);font-size:16px;line-height:1.72}
.phone-shot{position:relative;overflow:hidden;width:min(100%,390px);margin:0 auto;border:8px solid #161b16;border-radius:28px;background:#111;box-shadow:0 22px 55px #1b231b2e}
.phone-shot img{display:block;width:100%;height:auto}
.hotspot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:4px solid var(--danger);border-radius:10px;box-shadow:0 0 0 3px #fff9,0 0 18px #e12727aa;pointer-events:none;animation:pulse 1.8s ease-in-out infinite}
.hotspot::after{content:"Pulsa aquí";position:absolute;right:-3px;top:-31px;padding:5px 8px;border-radius:6px;background:var(--danger);color:white;font:800 10px/1 Inter,Segoe UI,sans-serif;white-space:nowrap}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.update-callout{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:10px clamp(20px,8vw,120px);padding:38px 42px;border-radius:22px;background:var(--forest);color:white}
.update-callout h2{font-size:clamp(30px,4vw,44px)}
.update-guide{background:#eee7d9}
.support{padding:90px 22px;text-align:center}
.support h2{font-size:clamp(34px,4vw,52px)}
.support p:not(.eyebrow){max-width:650px;margin:0 auto 28px;color:var(--muted);line-height:1.7}
footer{display:flex;align-items:center;justify-content:center;gap:25px;padding:46px 22px;background:#0d110d;color:#ddd0b8;font-family:Georgia,serif}
footer img{width:180px;max-height:110px;object-fit:contain}
@media(max-width:760px){
  .tutorial-nav{height:70px;padding:0 14px}
  .tutorial-brand{width:150px;height:62px}
  .home-link{font-size:12px}
  .tutorial-hero{padding:52px 20px}
  .tutorial-hero h1{font-size:42px}
  .hero-actions{align-items:stretch;flex-direction:column}
  .guide{padding:65px 18px}
  .guide-heading{align-items:flex-start}
  .guide-heading>span{width:54px;height:54px;flex:0 0 54px}
  .guide h2{font-size:34px}
  .step,.step:nth-child(even){grid-template-columns:1fr;gap:24px}
  .step:nth-child(even) .step-copy,.step:nth-child(even) .phone-shot{grid-column:1}
  .step:nth-child(even) .phone-shot{grid-row:auto}
  .step-copy{padding:0 4px}
  .phone-shot{width:min(100%,360px);border-width:6px}
  .hotspot{border-width:3px}
  .update-callout{align-items:stretch;flex-direction:column;margin:0 18px;padding:28px 24px}
  footer{align-items:center;flex-direction:column;text-align:center}
}