@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@500;600;700;800&display=swap');
:root{--red:#ef1c2f;--black:#070709;--ink:#111116;--paper:#f4f1ec;--cream:#e9e3da;--line:#d6d1c9;--muted:#747178;--white:#fff;--max:1280px;--syne:'Syne',Arial,sans-serif;--body:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%}button,input,textarea{font:inherit}.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(239,28,47,.09),transparent 66%);pointer-events:none;z-index:0;right:-180px;top:10vh}.site-header{height:92px;position:absolute;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2));color:#fff}.brand{display:flex;align-items:center;gap:12px;font-family:var(--syne);font-weight:500;font-size:18px;letter-spacing:-.04em}.brand img{width:48px;height:48px;object-fit:cover;border-radius:50%;border:1px solid rgba(255,255,255,.2)}.brand strong{font-weight:800}.brand em{font-style:normal;font-size:10px;color:var(--red);margin-left:5px;vertical-align:top}.main-nav{display:flex;align-items:center;gap:31px;font-size:12px;font-weight:700;letter-spacing:.015em}.main-nav>a:not(.nav-cta){color:#a9a9ae}.main-nav>a:hover{color:#fff}.nav-cta{border:1px solid rgba(255,255,255,.25);padding:12px 16px;border-radius:999px;display:flex;gap:16px}.nav-cta span{color:var(--red)}.menu-toggle{display:none;border:0;background:none;width:42px;height:42px;padding:9px}.menu-toggle span{display:block;height:2px;background:#fff;margin:7px 0}
.hero{min-height:860px;height:100svh;max-height:1020px;background:#070709;color:#fff;display:grid;grid-template-columns:.93fr 1.07fr;align-items:center;padding:130px max(24px,calc((100vw - var(--max))/2)) 65px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 44%,#232329 0,transparent 35%),linear-gradient(135deg,transparent 0 62%,rgba(239,28,47,.08) 62% 63%,transparent 63%)}.hero-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 78%)}.hero-copy{position:relative;z-index:3;max-width:730px}.kicker{font-size:10px;letter-spacing:.18em;color:#99999f;font-weight:800;display:flex;align-items:center;gap:11px}.kicker span{width:34px;height:2px;background:var(--red)}.hero h1{font-family:var(--syne);font-weight:700;font-size:clamp(56px,6.15vw,98px);letter-spacing:-.075em;line-height:.84;margin:28px 0 31px}.hero h1 i{font-style:normal;color:#5d5d63}.hero h1 u{text-decoration:none;color:var(--red)}.hero-copy>p{max-width:650px;font-size:16px;line-height:1.8;color:#a9a9af}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:38px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:27px;border:0;padding:17px 22px;border-radius:2px;font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer;transition:.22s}.btn:hover{transform:translateY(-3px)}.btn-red{background:var(--red);color:#fff;box-shadow:0 18px 50px rgba(239,28,47,.2)}.text-link{font-size:10px;font-weight:800;letter-spacing:.1em;color:#d3d3d5;display:flex;gap:14px}.text-link span{color:var(--red)}.micro-proof{display:grid;gap:5px;margin-top:70px;padding-left:18px;border-left:2px solid #29292e}.micro-proof b{font-size:9px;letter-spacing:.11em;color:#88898e}.micro-proof span{font-size:11px;color:#5e5f64}.hero-art{height:650px;position:relative;z-index:3;perspective:1200px}.hero-poster{position:absolute;overflow:hidden;background:#151519;border:1px solid rgba(255,255,255,.13);box-shadow:0 35px 80px rgba(0,0,0,.45)}.hero-poster img{width:100%;height:100%;object-fit:contain;object-position:center;background:#111115}.poster-main{width:min(610px,44vw);height:345px;right:-70px;top:160px;transform:rotate(-4deg);z-index:3}.poster-top{width:355px;height:150px;right:55px;top:30px;transform:rotate(5deg);z-index:2}.poster-bottom{width:300px;height:150px;left:25px;bottom:5px;transform:rotate(6deg);z-index:4}.hero-number{position:absolute;right:-33px;top:35px;font-family:var(--syne);font-weight:800;font-size:clamp(66px,8vw,130px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);letter-spacing:-.08em}.hero-chip{position:absolute;z-index:6;background:var(--red);padding:9px 12px;font-size:8px;font-weight:800;letter-spacing:.13em;box-shadow:0 14px 30px rgba(0,0,0,.3)}.chip-1{left:10%;top:123px;transform:rotate(-7deg)}.chip-2{right:1%;bottom:78px;background:#fff;color:#111;transform:rotate(5deg)}
.brand-strip{height:58px;background:var(--red);color:#fff;display:flex;align-items:center;overflow:hidden;white-space:nowrap}.strip-track{display:flex;align-items:center;gap:28px;animation:marquee 24s linear infinite;font-family:var(--syne);font-size:12px;font-weight:800;letter-spacing:.06em}.strip-track i{font-style:normal;color:#6e000a}@keyframes marquee{to{transform:translateX(-50%)}}
.section{width:min(var(--max),calc(100% - 48px));margin:auto}.intro{padding:125px 0 75px;display:grid;grid-template-columns:1.2fr .66fr;gap:90px;align-items:end}.section-index{display:block;font-size:9px;letter-spacing:.18em;font-weight:800;color:#8a8580;margin-bottom:20px}.intro h2,.work h2,.experience h2,.contact h2{font-family:var(--syne);font-size:clamp(44px,5.2vw,76px);line-height:.92;letter-spacing:-.065em;margin:0}.intro h2 em,.work h2 em,.experience h2 em,.contact h2 em,.agency h2 em{font-style:normal;color:var(--red)}.intro-copy{font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 4px}
.service-gallery{padding-bottom:120px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:330px;gap:11px}.service-tile{position:relative;overflow:hidden;background:#111}.service-wide{grid-column:span 2}.service-tile img{width:100%;height:100%;object-fit:contain;object-position:center;background:#101014;transform:scale(1);transition:.55s filter,.55s transform;image-rendering:auto}.service-tile:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);pointer-events:none}.service-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 10%,rgba(0,0,0,.9) 100%),linear-gradient(90deg,rgba(7,7,9,.22),transparent)}.service-tile:hover img{transform:scale(1.025);filter:saturate(1.14)}.service-copy{position:absolute;z-index:2;left:25px;right:25px;bottom:24px;color:#fff}.service-copy>span{font-size:9px;color:var(--red);font-weight:800;letter-spacing:.14em}.service-copy h3{font-family:var(--syne);font-size:clamp(23px,2.3vw,34px);letter-spacing:-.045em;margin:7px 0 8px}.service-copy p{font-size:11px;line-height:1.6;color:#c4c4c7;max-width:410px;margin:0}.service-copy b{display:block;font-size:8px;letter-spacing:.12em;color:#8d8d92;margin-top:14px}
.work{background:#09090b;color:#fff;padding-bottom:110px}.work-head{padding:115px 0 62px;display:grid;grid-template-columns:1.12fr .7fr;gap:90px;align-items:end}.section-index.light{color:#6c6c72}.work h2 em{color:#707076}.work-head>p{color:#96969d;line-height:1.9;font-size:13px;margin:0}.projects{width:min(1450px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:380px 300px;gap:12px}.project{margin:0;position:relative;overflow:hidden;background:#151519}.project img{width:100%;height:100%;object-fit:contain;object-position:center;background:#111115;filter:saturate(.83) contrast(1.05);transition:.6s}.project:hover img{transform:scale(1.04);filter:saturate(1.05)}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88))}.project-1{grid-row:span 2}.project-4{display:none}.project figcaption{position:absolute;left:28px;right:28px;bottom:25px;z-index:2}.project figcaption span{display:block;color:var(--red);font-size:8px;letter-spacing:.17em;font-weight:900;margin-bottom:7px}.project figcaption strong{font-family:var(--syne);font-size:clamp(18px,2vw,29px);letter-spacing:-.04em;line-height:1.05;max-width:560px;display:block}
.experience{padding:125px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center}.experience-copy>p{color:var(--muted);font-size:13px;line-height:1.9;max-width:470px;margin:27px 0 34px}.text-link.dark{color:#111}.experience-steps{border-top:1px solid var(--line)}.experience-steps>div{display:grid;grid-template-columns:65px 150px 1fr;align-items:center;min-height:118px;border-bottom:1px solid var(--line);gap:20px}.experience-steps b{font-size:10px;color:var(--red)}.experience-steps h3{font-family:var(--syne);font-size:22px;letter-spacing:-.04em;margin:0}.experience-steps p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}
.agency{background:var(--red);color:#fff;display:grid;grid-template-columns:.9fr 1.1fr;min-height:560px}.agency-image{overflow:hidden;min-height:430px}.agency-image img{width:100%;height:100%;object-fit:contain;object-position:center;background:#b90819;filter:grayscale(.1) contrast(1.08)}.agency-copy{padding:75px max(34px,calc((100vw - var(--max))/2));padding-left:70px;display:flex;flex-direction:column;justify-content:center}.agency-copy>span{font-size:9px;font-weight:900;letter-spacing:.16em;color:#76000a}.agency h2{font-family:var(--syne);font-size:clamp(42px,4.8vw,68px);letter-spacing:-.065em;line-height:.93;margin:18px 0 25px}.agency h2 em{color:#75000a}.agency-copy>p{max-width:610px;font-size:13px;line-height:1.8;color:#ffd9dc;margin:0 0 33px}.btn-white{background:#fff;color:#111;width:max-content}
.contact{padding:130px 0;display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.contact-title>p{color:var(--muted);font-size:13px;line-height:1.85;max-width:520px;margin-top:25px}.contact-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:38px;font-size:9px;font-weight:800;letter-spacing:.1em;color:#85817b}.contact-meta a{color:var(--red)}.contact-form{padding-top:18px}.contact-form label{display:grid;grid-template-columns:45px 1fr;align-items:center;border-bottom:1px solid #cfcac3}.contact-form label>span{font-size:8px;font-weight:800;color:#aaa59f}.contact-form input,.contact-form textarea{border:0;background:transparent;outline:0;width:100%;padding:22px 0;font-size:14px;color:#111;resize:none}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#85817b}.contact-form .btn{margin-top:30px}
footer{background:#070709;color:#fff;padding:50px max(24px,calc((100vw - var(--max))/2)) 26px}.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:58px}.footer-top>strong{font-family:var(--syne);font-size:clamp(24px,3.6vw,54px);letter-spacing:-.06em;color:#4d4d52}.footer-bottom{border-top:1px solid #26262b;padding-top:22px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:#67676d}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}
@media(max-width:1050px){.hero{height:auto;max-height:none;min-height:980px;grid-template-columns:1fr;padding-top:145px}.hero-copy{max-width:800px}.hero-art{height:480px;margin-top:15px}.poster-main{width:70vw;right:-25px;top:105px}.poster-top{right:10%;top:0}.poster-bottom{left:5%;bottom:0}.intro,.work-head,.experience,.contact{grid-template-columns:1fr;gap:38px}.service-gallery{grid-template-columns:repeat(2,1fr)}.projects{grid-template-columns:1fr 1fr;grid-template-rows:410px 300px}.project-1{grid-column:1/-1;grid-row:auto}.project-4{display:block}.agency{grid-template-columns:1fr}.agency-image{height:390px}.agency-copy{padding:65px 32px}.experience-steps{margin-top:15px}}
@media(max-width:720px){.site-header{height:76px;padding:0 18px}.brand{font-size:15px}.brand img{width:40px;height:40px}.menu-toggle{display:block;z-index:50}.main-nav{display:none;position:absolute;top:70px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:0;background:#151519;border:1px solid #2b2b30;padding:14px;border-radius:14px;box-shadow:0 25px 70px #000}.main-nav.open{display:flex}.main-nav a{padding:13px 10px}.nav-cta{margin-top:6px}.hero{padding:116px 20px 45px;min-height:930px}.hero h1{font-size:clamp(49px,14.6vw,70px)}.hero-copy>p{font-size:13px}.hero-actions{flex-direction:column;align-items:flex-start;gap:23px}.micro-proof{margin-top:42px}.hero-art{height:365px}.poster-main{width:91vw;height:230px;top:92px;right:-28px}.poster-top{width:230px;height:100px;right:0}.poster-bottom{width:205px;height:100px;left:0}.hero-number{font-size:78px;top:10px}.chip-1{top:78px;left:0}.chip-2{bottom:0}.brand-strip{height:50px}.section{width:calc(100% - 40px)}.intro{padding:84px 0 48px}.intro h2,.work h2,.experience h2,.contact h2{font-size:clamp(41px,11.7vw,56px)}.service-gallery{grid-template-columns:1fr;grid-auto-rows:295px;padding-bottom:80px}.service-wide{grid-column:auto}.work{padding-bottom:72px}.work-head{padding:82px 0 45px}.projects{width:calc(100% - 20px);grid-template-columns:1fr;grid-template-rows:none}.project,.project-1{height:285px;grid-column:auto}.project-4{display:block}.experience{padding:84px 0}.experience-steps>div{grid-template-columns:38px 105px 1fr;gap:12px;min-height:108px}.experience-steps h3{font-size:18px}.experience-steps p{font-size:10px}.agency-image{height:290px;min-height:0}.agency-copy{padding:52px 20px}.agency h2{font-size:clamp(40px,11vw,55px)}.btn{width:100%}.contact{padding:85px 0}.contact-form label{grid-template-columns:34px 1fr}.footer-top{align-items:flex-start;flex-direction:column;gap:34px;padding-bottom:42px}.footer-bottom{flex-direction:column;gap:11px}.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* CAMBIO 2026-08-30: imágenes completas, sin recortes */
.hero-poster img,.service-tile img,.project img,.agency-image img{max-width:100%;max-height:100%;}
@media(max-width:760px){.hero-poster img,.service-tile img,.project img,.agency-image img{object-fit:contain;object-position:center;}}


/* NUEVO 2026-08-30: showcase dinámico del hero. Conserva el montaje actual,
   pero cada tarjeta cambia de imagen de forma independiente y sin recortes. */
.hero-showcase .dynamic-poster{isolation:isolate;background:#0b0b0e;}
.hero-showcase .poster-image{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;background:#0b0b0e;
  opacity:1;transform:scale(1);filter:saturate(.98) contrast(1.02);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.35s cubic-bezier(.22,.61,.36,1),filter 1.1s ease;
  will-change:opacity,transform,filter;
}
.hero-showcase .dynamic-poster.is-changing .poster-image{
  opacity:0;transform:scale(.975);filter:saturate(.8) contrast(.96) blur(1px);
}
.hero-showcase .dynamic-poster.just-changed .poster-image{
  animation:posterReveal 1.25s cubic-bezier(.22,.61,.36,1) both;
}
.hero-showcase .poster-sheen{
  position:absolute;z-index:2;inset:-35%;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 48%,transparent 58%);
  transform:translateX(-75%) rotate(8deg);
}
.hero-showcase .dynamic-poster.just-changed .poster-sheen{animation:posterSheen 1.15s ease-out both;}
.hero-showcase .dynamic-poster::after{
  content:"";position:absolute;z-index:3;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),inset 0 -45px 70px rgba(0,0,0,.10);
}
.hero-showcase .poster-main{animation:floatMain 7s ease-in-out infinite;}
.hero-showcase .poster-top{animation:floatTop 8.5s ease-in-out infinite;}
.hero-showcase .poster-bottom{animation:floatBottom 6.8s ease-in-out infinite;}
@keyframes posterReveal{0%{opacity:0;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}
@keyframes posterSheen{0%{opacity:0;transform:translateX(-75%) rotate(8deg)}30%{opacity:.55}100%{opacity:0;transform:translateX(75%) rotate(8deg)}}
@keyframes floatMain{0%,100%{margin-top:0}50%{margin-top:-7px}}
@keyframes floatTop{0%,100%{margin-top:0}50%{margin-top:5px}}
@keyframes floatBottom{0%,100%{margin-bottom:0}50%{margin-bottom:6px}}
@media (prefers-reduced-motion:reduce){
  .hero-showcase .poster-main,.hero-showcase .poster-top,.hero-showcase .poster-bottom{animation:none}
  .hero-showcase .poster-image{transition:opacity .25s ease;transform:none!important}
  .hero-showcase .dynamic-poster.just-changed .poster-image,.hero-showcase .dynamic-poster.just-changed .poster-sheen{animation:none}
}