:root{
  --bg:#EDEAE2; --bg2:#E3E1DC; --ink:#161616; --muted:#6a6660; --line:#cfc9bd;
  --red:#C4290B; --red2:#CC0014; --onred:#EDEAE2;
  --display:"League Gothic","Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,72px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141312; --bg2:#1c1a18; --ink:#EDEAE2; --muted:#a39d94; --line:#34302c;
    --red:#E24A22; --red2:#F0473A;
  }
}
:root[data-theme="dark"]{
  --bg:#141312; --bg2:#1c1a18; --ink:#EDEAE2; --muted:#a39d94; --line:#34302c;
  --red:#E24A22; --red2:#F0473A;
}
html{scroll-behavior:smooth;height:100%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:3px solid var(--red2);outline-offset:3px}
.g{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:400;text-transform:uppercase;line-height:.88;color:var(--red);letter-spacing:.3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lettering{line-height:0;font-size:0}
.lettering img{width:100%;height:auto}

/* hero */
.hero{position:relative;background:#000;height:calc(100svh - 54px - env(safe-area-inset-top,0px));min-height:460px;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:clamp(22px,4vh,44px) clamp(12px,3vw,40px) clamp(18px,3vh,36px)}
.hero .seats{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%;object-fit:cover;object-position:top;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%);mask-image:linear-gradient(to bottom,transparent,#000 60%)}
.role{position:relative;z-index:1;width:227px;height:20px;color:#EDEAE2;font-weight:700;font-size:clamp(12px,1.3vw,18px);letter-spacing:clamp(.12em,.9vw,.32em);text-transform:uppercase;text-align:center;margin-left:.32em}
.role span{font-family:var(--body)}
.hero-word{position:relative;z-index:1;width:192px;height:90px;object-fit:cover}
.name{position:relative;z-index:1;flex:1;min-height:0;width:min(817px,100%);display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:400;text-transform:uppercase;color:#D8331A;line-height:.84;text-align:center;letter-spacing:.005em}
.name .ln{display:block;white-space:nowrap;font-size:clamp(90px,17vw,300px)}

/* sobre mí */
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);padding:clamp(56px,8vw,110px) var(--pad);max-width:1440px;margin:0 auto}
.intro .head{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);flex-wrap:wrap}
.pic{width:clamp(104px,10vw,148px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:4px solid var(--red)}
.about-title img{width:158px;height:58px;object-fit:cover}
.intro .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;margin-top:18px;max-width:58ch}
.intro .lead:first-of-type{margin-top:24px}
.facts{align-self:start}
.facts h3{font-size:clamp(34px,3.4vw,46px);margin:0 0 8px}
.facts .blk{margin-bottom:30px}
.facts .blk:last-child{margin-bottom:0}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:8px 0;border-bottom:1.5px solid var(--red);font-size:16px}
.row>div{min-width:0}
.row span{color:var(--muted);white-space:nowrap}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tools span{border:1.5px solid var(--red);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:14px}

/* proceso */
.story{background:#161616;color:#EDEAE2;padding:clamp(64px,9vw,120px) var(--pad)}
.story h2{color:var(--red);font-size:clamp(70px,11vw,170px)}
.story-word{width:540px;height:auto}
.story .big{font-size:clamp(22px,2.3vw,32px);line-height:1.4;max-width:46ch;margin-top:26px;color:#EDEAE2}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:36px}
.step{border-top:1.5px solid var(--red);padding-top:14px}
.step .n{font-family:var(--display);font-variation-settings:"wdth" 75;font-size:64px;line-height:.9;color:var(--red)}
.step h4{font-size:19px;margin:6px 0;color:#EDEAE2}
.step p{font-size:15.5px;color:#bdb8ae}

/* divisor trabajos */
.divider{position:relative;background:var(--red);overflow:hidden;padding:clamp(70px,11vw,150px) var(--pad)}

/* casos */
.wrap{max-width:1440px;margin:0 auto;position:relative;z-index:1}
.cs{padding:clamp(64px,9vw,120px) var(--pad);border-bottom:1.5px solid var(--line)}
.cs.alt{background:var(--bg2)}
.cs .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.cs .top.poster{grid-template-columns:1.35fr .65fr;align-items:start}
.cs .top.poster .media{width:100%;max-width:340px;justify-self:end}
.cs .client{font-weight:700;color:var(--red2);font-size:16px;letter-spacing:.04em;margin-bottom:10px}
.cs h2{font-size:clamp(60px,8.5vw,128px)}
.meta{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.45}
.meta b{color:var(--ink)}
.watch{display:inline-block;margin-top:14px;font-weight:700;font-size:16px;color:var(--red2);text-decoration:none;border-bottom:2px solid var(--red2);padding-bottom:2px}
.watch:hover{opacity:.75}
.media{display:block;position:relative;overflow:hidden;background:#000}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.media:hover img{transform:scale(1.03)}
.play{position:absolute;left:16px;bottom:16px;background:var(--red2);color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:36px}
.three .media{aspect-ratio:16/10}
.fields{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:36px;border-top:1.5px solid var(--red)}
.fields.f4{grid-template-columns:repeat(4,1fr)}
.fields.f3{grid-template-columns:repeat(3,1fr)}
.fields>div{padding:18px 28px;border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);font-size:15.5px;line-height:1.5}
.fields>div:first-child{padding-left:0}
.fields>div:last-child{border-right:none;padding-right:0}
.fields h4{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:400;text-transform:uppercase;color:var(--red);font-size:28px;line-height:1;margin-bottom:8px}

/* clientes */
.clientes{padding:clamp(64px,9vw,120px) var(--pad);text-align:center}
.clientes h2{font-size:clamp(60px,9vw,120px);color:var(--red2)}
.cl{font-family:var(--display);font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(40px,6vw,84px);line-height:1.08;color:var(--muted);margin-top:36px}
.cl i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);margin:0 .35em;vertical-align:middle;position:relative;top:-.08em}
.medios{margin-top:48px}
.medios h3{font-size:40px;color:var(--ink)}
.medios p{color:var(--muted);margin-top:8px;font-size:16px}

/* english */
.en{background:var(--red);color:var(--onred);padding:clamp(64px,9vw,120px) var(--pad)}
.en h2{color:var(--onred);font-size:clamp(64px,9vw,130px)}
.en p{max-width:70ch;font-size:clamp(17px,1.4vw,20px);margin-top:18px}

/* contacto */
.contacto{padding:clamp(80px,12vw,160px) var(--pad);display:flex;justify-content:center}
.brk{position:relative;padding:clamp(28px,4vw,56px) clamp(40px,7vw,110px);text-align:center;color:var(--red2)}
.brk::before,.brk::after{content:"";position:absolute;top:0;bottom:0;width:clamp(26px,3vw,46px);border:clamp(10px,1.4vw,20px) solid var(--red2)}
.brk::before{left:0;border-right:none;border-radius:30px 0 0 30px}
.brk::after{right:0;border-left:none;border-radius:0 30px 30px 0}
.brk a{text-decoration:none;display:block;font-size:clamp(16px,2.3vw,32px);letter-spacing:.12em;line-height:1.8;word-break:break-word}
.brk a:hover{text-decoration:underline}
.brk .small{font-size:clamp(13px,1.4vw,19px);letter-spacing:.06em}
.brk .nw{white-space:nowrap}
footer{display:flex;justify-content:space-between;gap:12px;padding:22px var(--pad) 30px;font-weight:700;font-size:14px;color:var(--red2);border-top:1.5px solid var(--red)}

@media (max-width:860px){
  .intro,.cs .top,.cs .top.poster{grid-template-columns:1fr}
  .cs .top.poster .media{justify-self:start}
  .three{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .fields,.fields.f4,.fields.f3{grid-template-columns:1fr}
  .fields>div,.fields>div:first-child,.fields>div:last-child{padding:18px 0;border-right:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.media img{transition:none}}

/* enlaces sobre fondo rojo */
.en .watch{color:var(--onred);border-color:var(--onred)}

/* títulos con letras en inglés: otra proporción, misma caja que la versión en español */
.hero-word.hero-word-en{width:139px;height:auto;margin-top:36px}
.about-title-en img{width:auto;height:58px}