:root{
  --ink:#062f3d;
  --teal:#00515b;
  --teal-deep:#021e24;
  --paper:#fffefa;
  --ground:#f2f6f4;
  --line:#d8e4e0;
  --accent:#ef5423;
  --muted:#48636a;
}
*{box-sizing:border-box}
html{overflow-x:hidden;max-width:100%}
body{margin:0;overflow-x:hidden;max-width:100%;background:var(--ground);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;font-size:16px;line-height:1.5}
h1,h2,h3{font-family:"Big Shoulders Display",sans-serif;margin:0;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
.tag{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:1px;color:var(--accent);margin:0 0 16px;text-transform:uppercase;display:block}
section{padding:clamp(40px,6vw,80px) clamp(24px,6vw,70px)}

.nav{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,6vw,70px);background:transparent}
.brand{display:flex;align-items:center}
.brand-icon{height:38px;width:auto}
.nav-actions{display:flex;align-items:center;gap:18px}
.nav-login{color:#fff;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.nav-login:hover{border-color:#fff}
.nav-cta{background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:10px 18px;border-radius:2px}

.hero-photo{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:50px;overflow:hidden}
.hero-photo-bg{position:absolute;inset:0;z-index:0;background-color:var(--teal-deep);
  background-image:url('./foto-hero.jpg');
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat}
.hero-photo-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--teal-deep) 0%, rgba(2,30,36,.95) 20%, rgba(2,30,36,.6) 38%, rgba(2,30,36,.15) 58%, rgba(2,30,36,0) 75%)}
.hero-photo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,30,36,.7),transparent 55%)}
.hero-photo h1,.hero-caption,.hero-cta{position:relative;z-index:1}
.hero-photo h1{color:#fff;font-size:clamp(32px,5.4vw,66px);line-height:1;max-width:20ch;white-space:normal}
.hero-caption{display:block;color:#dcebea;font-family:"DM Sans",Arial,sans-serif;font-size:16px;line-height:1.6;margin-top:22px;max-width:40ch}
.hero-cta{position:absolute;right:clamp(24px,6vw,70px);bottom:50px}

.intro{background:var(--ground)}
.intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.intro-grid h2{font-size:clamp(32px,4.2vw,56px);line-height:.98;color:var(--ink)}
.intro-side p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:16px;font-family:"DM Sans"}

.tool-row{display:flex;align-items:flex-start;gap:16px;margin-top:50px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}
.tool-arrow{flex:none;align-self:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--teal);font-size:15px;cursor:pointer}
.tool-card{flex:none;width:200px;scroll-snap-align:start}
.tool-swatch{height:160px;border-radius:4px;display:flex;align-items:flex-end;padding:14px;margin-bottom:12px}
.tool-swatch span{font-family:"Big Shoulders Display",sans-serif;font-size:30px;color:#fff;font-weight:700}
.fase1{background:linear-gradient(0deg, rgba(2,30,36,.55), rgba(2,30,36,0) 60%), url('./foto-fase1.jpg') center/cover no-repeat}
.fase2{background:linear-gradient(0deg, rgba(2,30,36,.55), rgba(2,30,36,0) 60%), url('./foto-fase2.jpg') center/cover no-repeat}
.fase3{background:linear-gradient(0deg, rgba(2,30,36,.55), rgba(2,30,36,0) 60%), url('./foto-fase3.jpg') center/cover no-repeat}
.fase4{background:linear-gradient(0deg, rgba(2,30,36,.55), rgba(2,30,36,0) 60%), url('./foto-fase4.jpg') center/cover no-repeat}
.fase5{background:linear-gradient(0deg, rgba(2,30,36,.55), rgba(2,30,36,0) 60%), url('./foto-fase5.jpg') center/cover no-repeat}
.tool-label{font-family:"DM Sans";font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--ink);margin-bottom:4px}
.tool-sub{font-family:"DM Sans";font-size:11px;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.stats article{background:var(--ground);padding:34px 20px;text-align:center}
.stats strong{display:block;font-family:"Big Shoulders Display",sans-serif;font-size:clamp(36px,4.5vw,52px);color:var(--accent)}
.stats span{display:block;font-family:"Space Mono",monospace;font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.5px}

.vivo{position:relative;overflow:hidden;min-height:60vh;display:flex;flex-direction:column;justify-content:center;color:#fff}
.vivo-bg{position:absolute;inset:0;z-index:0;background-color:var(--teal-deep);
  background-image:url('./foto-sesion.jpg');
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat}
.vivo-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--teal-deep) 0%, rgba(2,30,36,.95) 20%, rgba(2,30,36,.6) 38%, rgba(2,30,36,.15) 58%, rgba(2,30,36,0) 75%)}
.vivo>*:not(.vivo-bg){position:relative;z-index:1}
.vivo h2{color:#fff;font-size:clamp(30px,4vw,48px);max-width:18ch;line-height:1}
.vivo .section-lead{display:block;color:#b9d2d0;font-family:"DM Sans";font-size:15px;max-width:52ch;margin-top:18px;line-height:1.6}

.casos{background:var(--ground)}
.casos-title{font-size:clamp(28px,3.4vw,40px);max-width:34ch;line-height:1.08;margin-bottom:36px;color:var(--ink)}
.casos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.casos-grid article{border-top:3px solid var(--accent);padding-top:16px}
.casos-num{font-family:"Space Mono",monospace;font-size:11px;color:var(--accent)}
.casos-grid h3{font-family:"Big Shoulders Display";font-size:22px;margin:8px 0 8px;color:var(--ink)}
.casos-grid p{font-family:"DM Sans";color:var(--muted);font-size:13.5px;line-height:1.5}

.william{background:var(--ground);max-width:900px}
.william h2{font-size:clamp(32px,4vw,52px);margin-bottom:16px;color:var(--ink)}
.william .section-lead{display:block;color:var(--muted);font-family:"DM Sans";font-size:15px;max-width:60ch;line-height:1.6}

.cta-photo{position:relative;min-height:70vh;display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr auto;column-gap:40px;overflow:hidden;padding:80px clamp(24px,6vw,70px) 50px}
.cta-photo-bg{position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(0deg, rgba(2,30,36,.92) 10%, rgba(2,30,36,.45) 60%, rgba(239,84,35,.22) 100%),
    url('./foto-cta.jpg') center 35%/cover no-repeat}
.cta-photo h2{grid-row:1;grid-column:1;position:relative;z-index:1;color:#fff;font-size:clamp(30px,4.2vw,52px);line-height:1;align-self:center;max-width:16ch}
.cta-box,.cta-links{position:relative;z-index:1}
.cta-box{grid-row:1;grid-column:2;justify-self:end;align-self:center;background:rgba(2,30,36,.72);backdrop-filter:blur(4px);padding:26px;border-radius:4px;max-width:300px;width:100%}
.cta-box .tag{color:var(--accent)}
.cta-box label{display:block;font-family:"Space Mono",monospace;font-size:10px;color:#a9c7c6;letter-spacing:.5px;margin-bottom:12px}
.cta-box input{display:block;width:100%;margin-top:6px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;font-family:"DM Sans";font-size:13px;padding:6px 0}
.cta-box input::placeholder{color:#7fa09d}
.btn-primary{margin-top:18px;display:inline-block;background:var(--accent);color:#fff;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.5px;padding:12px 18px;border-radius:2px}
.cta-links{grid-row:2;grid-column:1/-1;align-self:end;justify-self:end;text-align:right;padding:26px;white-space:nowrap}
.cta-links a{display:block;color:#fff;font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.5px;margin-top:10px}
.cta-links a:hover{color:var(--accent)}

.site-footer{display:flex;align-items:center;justify-content:space-between;padding:26px clamp(24px,6vw,70px);background:var(--teal-deep);color:#a9c7c6}
.footer-wordmark{height:20px}
.site-footer p{font-size:11px}

@media(max-width:1100px) and (min-width:861px){
  .casos-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .intro-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .casos-grid{grid-template-columns:1fr}
  .cta-photo{grid-template-rows:auto auto auto;grid-template-columns:1fr;min-height:auto;padding-top:50px}
  .cta-box{grid-row:2;grid-column:1;justify-self:start;margin-top:20px}
  .cta-links{grid-row:3;grid-column:1;justify-self:start;text-align:left;padding:0 0 30px}
  section{padding-left:20px;padding-right:20px}
  .tool-card{width:150px}
  .tool-swatch{height:120px}
  .tool-arrow{width:32px;height:32px;font-size:13px}
}