/* Bululú Studio */
:root{--bg:#EFEDE8;--ink:#121212;--muted:#55524C;--soft:#3A3833;--accent:#C8361A;--line:#121212;
--body:'Instrument Sans',system-ui,sans-serif;--display:'Bricolage Grotesque',sans-serif;--mono:'JetBrains Mono',monospace;--pad:64px}
.mono{font-family:var(--mono)}
.acc{color:var(--accent)}
.pill{display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.pill:hover{color:var(--bg);background:var(--accent)}

/* Cabecera */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:28px var(--pad);border-bottom:1px solid var(--line)}
.site-header .logo-word{font-size:34px}
.logo-tag{font-family:Syne,sans-serif;font-weight:600;font-size:15px;letter-spacing:.3em;color:var(--accent);padding-top:.5em}
.nav{display:flex;gap:40px;align-items:center;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.nav .cta{padding:14px 22px;background:var(--ink);color:var(--bg);border-radius:999px}
.nav .cta:hover{background:var(--accent);color:#fff}
.header-mobile{display:none;align-items:center;gap:6px}

/* Portada */
.hero{padding:72px var(--pad) 56px;display:flex;flex-direction:column;gap:40px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(64px,10.3vw,148px);line-height:.88;letter-spacing:-.045em;max-width:1040px}
.hero-aside{display:flex;flex-direction:column;gap:20px;max-width:280px;padding-bottom:12px}
.hero-aside p{font-size:19px;line-height:1.45}
.hero-aside .mono{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.reel{position:relative;aspect-ratio:16/8.8;border-radius:6px;overflow:hidden;background:#1B1B1B}
.reel-tag{position:absolute;left:24px;bottom:20px;padding:8px 12px;border-radius:999px;background:rgba(18,18,18,.72);color:var(--bg);font-family:var(--mono);font-size:12px;letter-spacing:.05em}

/* Secciones */
.section{padding:120px var(--pad)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(48px,6.1vw,88px);line-height:.95;letter-spacing:-.035em}
.count{font-family:var(--mono);font-size:14px;color:var(--muted)}

/* Servicios */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.service{display:flex;flex-direction:column;gap:20px;padding:32px 28px 40px;border-right:1px solid var(--line)}
.service:first-child{padding-left:0}
.service:last-child{border-right:0;padding-right:0}
.service .num{font-family:var(--mono);font-size:13px;color:var(--accent)}
.service h3{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.05;letter-spacing:-.02em}
.service p{font-size:16px;line-height:1.5;color:var(--soft)}

/* Fotografía */
.photo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:56px;margin-top:56px}
.photo-intro{grid-column:span 4;display:flex;flex-direction:column;gap:22px;padding-right:24px}
.photo-intro .mono{font-size:13px;color:var(--accent)}
.photo-intro h3{font-family:var(--display);font-weight:800;font-size:clamp(44px,5vw,72px);line-height:.92;letter-spacing:-.04em}
.photo-intro p{font-size:18px;line-height:1.55;color:var(--soft)}
.photo-intro .pill{align-self:flex-start}
.photo-cards{grid-column:span 8;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.photo-card{display:flex;flex-direction:column;gap:14px}
.photo-card .img{aspect-ratio:5/7;border-radius:6px;overflow:hidden}
.photo-card h4{font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.02em}
.photo-card p{font-size:16px;line-height:1.5;color:var(--soft)}
.photo-card .tags{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}

/* Trabajos */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.work{display:flex;flex-direction:column;gap:14px}
.work .img{aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:#1B1B1B}
.work-meta{display:flex;justify-content:space-between;gap:16px;font-size:17px}
.work-meta strong{font-weight:600}
.work-meta span{font-family:var(--mono);font-size:13px;color:var(--muted)}
#trabajos{padding-top:0}

/* El estudio */
.studio{background:var(--ink);color:var(--bg);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.studio figure{grid-column:span 6;display:flex;flex-direction:column;gap:12px}
.studio figure .img{aspect-ratio:3/2;border-radius:6px;overflow:hidden}
.studio figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#A8A49C}
.studio-text{grid-column:7/span 6;display:flex;flex-direction:column;gap:32px}
.studio-text .mono{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.studio-text h2{font-family:var(--display);font-weight:600;font-size:clamp(36px,3.9vw,56px);line-height:1.02;letter-spacing:-.03em}
.studio-text p{font-size:19px;line-height:1.6;color:#CFCBC2}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid #3A3A3A;padding-top:28px}
.steps div{display:flex;flex-direction:column;gap:6px;font-size:16px}
.steps .mono{font-size:12px;color:#A8A49C;letter-spacing:0;text-transform:none}

/* Contacto */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.contact-intro{grid-column:span 6;display:flex;flex-direction:column;gap:28px}
.contact-intro h2{font-family:var(--display);font-weight:800;font-size:clamp(60px,7.8vw,112px);line-height:.9;letter-spacing:-.045em}
.contact-intro p{font-size:19px;line-height:1.5;max-width:460px;color:var(--soft)}
.contact-intro a.mail{align-self:flex-start;font-family:var(--mono);font-size:18px;border-bottom:2px solid var(--accent);padding-bottom:4px}
.contact form{grid-column:8/span 5}
.form-fields{display:flex;flex-direction:column;gap:22px}
.form-fields label{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.form-fields input,.form-fields select,.form-fields textarea{height:52px;border:0;border-bottom:1px solid var(--ink);background:transparent;font-family:var(--body);font-size:18px;text-transform:none;letter-spacing:0;border-radius:0}
.form-fields textarea{height:auto;resize:none}
.form-fields button{height:60px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:15px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}

/* Pie */
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:40px var(--pad);border-top:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--muted)}
.site-footer nav{display:flex;gap:28px;flex-wrap:wrap}

/* Tablet */
@media (max-width:1100px){
  .photo-intro{grid-column:1/-1;padding-right:0}
  .photo-cards{grid-column:1/-1}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service{padding:32px 24px 40px 0!important;border-right:0;border-bottom:1px solid var(--line)}
}
/* Móvil */
@media (max-width:760px){
  :root{--pad:20px}
  .site-header{padding:12px 12px 12px 20px}
  .site-header .logo-word{font-size:26px}
  .logo-tag{font-size:11px}
  .nav{display:none}
  .header-mobile{display:flex}
  .header-mobile .cta{height:40px;padding:0 16px;display:flex;align-items:center;background:var(--ink);color:var(--bg);border-radius:999px;font-family:var(--mono);font-size:12px;text-transform:uppercase}
  .menu{display:block}
  .menu-panel{font-family:var(--mono);font-size:13px;text-transform:uppercase}
  .hero{padding:36px 20px 40px;gap:22px}
  .hero-top{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-aside{max-width:none;padding:0}
  .hero-aside p{font-size:17px}
  .reel{aspect-ratio:4/5}
  .section{padding:64px 20px}
  .section-head{margin-bottom:28px}
  .services{grid-template-columns:1fr}
  .service{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:22px 0!important}
  .service .num{padding-top:6px;grid-row:span 2}
  .service h3{font-size:26px}
  .service p{font-size:15px}
  .photo{margin-top:16px;padding-top:32px;gap:20px}
  .photo-cards{display:flex;overflow-x:auto;gap:14px;margin:0 -20px;padding:0 20px;scroll-snap-type:x mandatory}
  .photo-card{flex:0 0 260px;scroll-snap-align:start}
  .photo-card h4{font-size:24px}
  .works{grid-template-columns:1fr;gap:32px}
  .work-meta{font-size:15px}
  .work-meta span{font-size:11px}
  .studio{display:flex;flex-direction:column;gap:22px}
  .studio-text{gap:22px}
  .studio-text p{font-size:16px}
  .steps{grid-template-columns:1fr;gap:14px;padding-top:20px}
  .steps div{flex-direction:row;gap:12px;font-size:15px}
  .steps .mono{width:96px;flex-shrink:0;font-size:11px}
  .contact{display:flex;flex-direction:column;gap:28px}
  .contact-intro{gap:20px}
  .contact-intro p{font-size:16px}
  .form-fields input,.form-fields select{height:48px;font-size:17px}
  .site-footer{flex-direction:column-reverse;align-items:flex-start;padding:28px 20px;font-size:12px}
  .site-footer nav{gap:18px}
}

/* Páginas legales */
.legal{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.legal .h2{margin-bottom:16px}
.legal h2{font-family:var(--display);font-weight:600;font-size:28px;margin-top:20px}
.legal p{font-size:17px;line-height:1.65;color:var(--soft)}