/* chanchos.art — mismo diseño que el sitio de la agencia: fucsia, negro, Inter y Work Sans. */
:root{--fucsia:#E5197F;--fucsia-osc:#B80F63;--negro:#0E0E0E;--blanco:#FFFFFF;--gris:#B9B3B0;--borde:clamp(20px,5vw,72px);--sans:"Inter",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fucsia);color:var(--negro);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}
::selection{background:var(--negro);color:var(--fucsia)}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--borde)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.045em}
.cap{font:600 14px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}

.logo{font:300 26px/1 "Work Sans",var(--sans);letter-spacing:-.01em;text-transform:none;text-decoration:none}
.top{position:sticky;top:0;z-index:10;background:var(--fucsia)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:64px;border-bottom:1.5px solid var(--negro)}
.top a{text-decoration:none}
.top nav{display:flex;gap:26px;align-items:center}
.top nav a.sec{min-height:44px;display:inline-flex;align-items:center}
.top nav a.sec:hover{color:var(--blanco)}
.top nav a[aria-current]{border-bottom:2px solid var(--negro)}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:0 22px;background:var(--negro);color:var(--blanco);font:600 17px/1.2 var(--sans);text-decoration:none;border:0;border-radius:0}
.btn:hover{background:var(--blanco);color:var(--negro)}
.btn:active{background:#2A2A2A;color:var(--blanco)}
.btn svg{width:20px;height:20px;flex:none;transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}
.btn.chico{min-height:44px;padding:0 16px;font-size:15px}
.btn.fucsia{background:var(--fucsia);color:var(--negro)}
.btn.fucsia:hover{background:var(--blanco)}

/* HERO: las dos opciones */
.dos{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 64px)}
.op{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:clamp(28px,5vw,72px) var(--borde);overflow:hidden;isolation:isolate}
.op h1,.op h2{font-size:clamp(44px,6.2vw,92px);line-height:.94;display:grid}
.op .apoyo{font-size:clamp(18px,1.6vw,21px);max-width:34ch;margin:0}
.op.ag{background:var(--fucsia);color:var(--negro)}
.op.ag h1 .bl{color:var(--blanco)}
.op.es{background:var(--negro);color:var(--blanco)}
.op.es h2 span{color:var(--fucsia)}
.op.es .apoyo{color:var(--gris)}
.op.es img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;z-index:-1;transition:transform .8s ease,opacity .4s ease}
.op.es:hover img{transform:scale(1.03);opacity:.55}
@media(max-width:820px){.dos{grid-template-columns:1fr;min-height:0}.op{min-height:62vh}}

/* SECCIONES NEGRAS (espacio) */
.pagina{background:var(--fucsia)}
.hero .wrap{display:grid;gap:28px;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,72px)}
.hero h1{font-size:clamp(42px,6.4vw,92px);line-height:.94;display:grid}
.hero h1 .bl{color:var(--blanco)}
.hero .apoyo{font-size:clamp(18px,1.6vw,21px);max-width:38ch;margin:0}
.hero figure{margin:0;overflow:hidden;background:var(--fucsia);aspect-ratio:4/5;max-height:70vh}
.hero figure img{width:100%;height:100%;object-fit:cover;object-position:50% 68%}
@media(min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:48px}.hero figure{aspect-ratio:auto;max-height:none;min-height:460px;height:100%}}

.servicios{background:var(--negro);color:var(--blanco);padding:clamp(72px,10vw,140px) 0}
.servicios h2{font-size:clamp(38px,6vw,84px);line-height:.96;max-width:13ch;margin-bottom:clamp(40px,6vw,72px)}
.servicios h2 span,.contacto h2 span{color:var(--fucsia)}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.serv{display:grid;gap:12px;border-top:1.5px solid var(--blanco);padding-top:16px}
.serv .num{font:600 15px/1 var(--sans);color:var(--fucsia);font-feature-settings:"tnum" 1}
.serv h3{font-size:28px;line-height:1.05;letter-spacing:-.035em}
.serv p{margin:0;color:var(--gris);max-width:36ch}
@media(min-width:760px){.lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}}
@media(min-width:1100px){.lista{grid-template-columns:repeat(4,minmax(0,1fr))}}

.galeria{background:var(--fucsia)}
.galeria .wrap{padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(72px,10vw,140px)}
.galeria h2{font-size:clamp(38px,6vw,84px);line-height:.96;max-width:13ch;margin-bottom:clamp(32px,5vw,56px)}
.fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.fotos img{width:100%;height:320px;object-fit:cover;background:#222}
.donde{margin:32px 0 0;font:500 clamp(20px,2.2vw,28px)/1.25 var(--sans);letter-spacing:-.03em}
.donde b{font-weight:600}

.contacto{background:var(--negro);color:var(--blanco);padding:clamp(72px,10vw,140px) 0;border-top:1.5px solid var(--fucsia)}
.contacto h2{font-size:clamp(44px,7.5vw,108px);line-height:.94;margin-bottom:24px}
.contacto p{font-size:clamp(18px,1.6vw,20px);color:var(--gris);max-width:34ch;margin:0 0 32px}

footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:baseline;padding-top:28px;padding-bottom:40px;font-size:16px}
footer a{font-weight:600}
footer a:hover{color:var(--blanco)}
@media(max-width:620px){.top nav{gap:16px}.top .btn{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}