@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Figtree-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Figtree-normal-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Figtree-normal-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/InstrumentSerif-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/InstrumentSerif-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Old School Tattoo Fuenlabrada · página provisional (dirección B «Sala oscura») */
:root{
  --tabaco:#17110E; --tabaco-2:#221A15; --tabaco-3:#2E241D; --hueso:#EEE4D3; --humo:#A69686;
  --ambar:#D9922E; --granate:#8A2226;
  --display:"Instrument Serif",Georgia,serif; --body:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{background:var(--tabaco);color:var(--hueso);font-family:var(--body);font-size:17px;line-height:1.6;position:relative;overflow-x:hidden}
body::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
.skip{position:absolute;left:-999px;top:10px;z-index:10;background:var(--ambar);color:var(--tabaco);padding:10px 16px}.skip:focus{left:10px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}

.top{display:flex;align-items:center;justify-content:space-between;max-width:1360px;margin:0 auto;padding:24px 40px}
.top img{width:56px;height:56px}
.nav{display:flex;gap:28px;font-size:15px;color:var(--humo)}
.nav a:hover{color:var(--hueso)}
.btn{display:inline-flex;align-items:center;font-weight:600;font-size:15px;padding:13px 24px;border-radius:2px;background:var(--ambar);color:var(--tabaco);transition:filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--hueso);box-shadow:inset 0 0 0 1px var(--humo)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--hueso)}

/* Portada: storyboard de su propio vídeo */
.hero{text-align:center;padding:30px 40px 0;position:relative}
.presents{font-family:var(--display);font-style:italic;font-size:24px;color:var(--humo)}
.board{display:flex;justify-content:center;gap:18px;margin:34px auto 0}
.board figure{width:290px}
.board img{width:290px;height:515px;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.board figure:nth-child(2) img{transform:translateY(-26px)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,11.5vw,176px);line-height:.86;letter-spacing:-.02em;margin-top:-170px;position:relative;text-shadow:0 6px 40px rgba(23,17,14,.75)}
.hero h1 em{display:block;font-style:italic}
.hero .sub{max-width:44ch;margin:30px auto 0;color:var(--humo);font-size:19px}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* Créditos */
.credits{max-width:860px;margin:130px auto 0;padding:0 40px}
.credits h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:30px;color:var(--humo);text-align:center;margin-bottom:34px}
.cr{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-size:19px}
.cr dt{color:var(--humo);white-space:nowrap}
.cr .dots{flex:1;border-bottom:1px dotted #5a4a3e;transform:translateY(-5px)}
.cr dd{font-family:var(--display);font-size:28px;text-align:right}
.cr dd a{border-bottom:1px solid var(--ambar)}
.cr dd a:hover{color:var(--ambar)}

section{padding:130px 0 0}
h2.big{font-family:var(--display);font-weight:400;font-size:clamp(46px,6vw,92px);line-height:.95;letter-spacing:-.015em}
.head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px}
.head p{color:var(--humo);max-width:36ch}
.head p a{color:var(--hueso);border-bottom:1px solid var(--ambar)}

/* Escenas */
.reel{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:16px;align-items:start}
.reel figure:nth-child(even){margin-top:70px}
.reel img,.reel2 img{width:100%;aspect-ratio:4/5;object-fit:cover}
.reel figcaption,.reel2 figcaption{font-family:var(--display);font-style:italic;font-size:20px;color:var(--humo);margin-top:10px}
.reel2{display:grid;grid-template-columns:1fr 1.3fr 1.3fr 1fr;gap:16px;margin-top:16px;align-items:start}

/* Servicios */
.svc{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.svc ol{list-style:none}
.svc li{border-top:1px solid var(--tabaco-3);padding:24px 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline}
.svc li:last-child{border-bottom:1px solid var(--tabaco-3)}
.svc li h3{font-family:var(--display);font-weight:400;font-size:52px;line-height:1}
.svc li.on h3{font-style:italic;color:var(--ambar)}
.svc li p{grid-column:1/-1;color:var(--humo);font-size:16px;max-width:52ch}
.svc li span{color:var(--humo);font-size:15px}
.svc .pic img{width:100%;height:620px;object-fit:cover}

/* Reseña */
.quote{text-align:center;max-width:980px;margin:0 auto;padding:0 40px}
.quote .stars{color:var(--ambar);letter-spacing:6px;font-size:20px}
.quote blockquote{font-family:var(--display);font-style:italic;font-size:clamp(34px,4.2vw,60px);line-height:1.1;margin:26px 0}
.quote cite{font-style:normal;color:var(--humo)}
.quote cite a{border-bottom:1px solid var(--ambar);color:var(--hueso)}

/* Estudio en panorámica */
.scope img{width:100%;aspect-ratio:2.39/1;object-fit:cover}
.scope figcaption{display:flex;justify-content:space-between;gap:20px;color:var(--humo);margin-top:14px;font-size:15px}

/* Equipo + tarifas */
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.artist{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.artist figure img{width:100%;height:440px;object-fit:cover;filter:grayscale(.15)}
.artist figcaption{margin-top:12px}
.artist figcaption b{font-family:var(--display);font-weight:400;font-size:32px;display:block;line-height:1}
.artist figcaption span{color:var(--humo);font-size:15px}
.price .cr dd{font-size:30px}
.price small{display:block;color:var(--humo);margin-top:18px;font-size:15px}

/* Final */
.end{margin-top:140px;background:var(--tabaco-2);padding:110px 0 40px}
.end h2{font-family:var(--display);font-weight:400;font-size:clamp(50px,7vw,112px);line-height:.95}
.end h2 em{font-style:italic}
.end .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.info{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-top:60px}
.info span{display:block;color:var(--humo);font-size:14px}
.info p{font-size:19px}
.info a:hover{color:var(--ambar)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:80px;padding-top:22px;border-top:1px solid var(--tabaco-3);color:var(--humo);font-size:14px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a:hover{color:var(--hueso)}

/* Páginas legales */
.legal{max-width:820px;margin:0 auto;padding:40px 40px 0}
.legal h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,72px);line-height:1;margin-bottom:34px}
.legal h2{font-family:var(--display);font-weight:400;font-size:30px;margin:36px 0 12px}
.legal p,.legal li{color:#d8ccba;font-size:16px;margin-bottom:12px}
.legal .volver{display:inline-block;margin-bottom:30px;color:var(--humo);border-bottom:1px solid var(--ambar)}

@media (max-width:820px){
  .wrap,.top{padding-left:20px;padding-right:20px}
  .nav{display:none}
  .top img{width:46px;height:46px}
  .top .btn{padding:10px 16px;font-size:14px}
  .hero{padding:16px 20px 0}
  .presents{font-size:19px}
  .board{gap:8px;margin-top:22px}
  .board figure{width:31%}
  .board img{width:100%;height:220px}
  .board figure:nth-child(2) img{transform:translateY(-12px)}
  .hero h1{margin-top:-64px;font-size:62px}
  .hero .sub{font-size:17px}
  .credits{margin-top:80px;padding:0 20px}
  .cr{flex-wrap:wrap;gap:2px}
  .cr .dots{display:none}
  .cr dd{text-align:left;font-size:24px;width:100%}
  section{padding-top:84px}
  .head{flex-direction:column;align-items:flex-start;gap:12px}
  .reel,.reel2{grid-template-columns:1fr 1fr;gap:10px}
  .reel figure:nth-child(even){margin-top:40px}
  .reel2 figure:nth-child(odd){margin-top:0}
  .reel2 figure:nth-child(even){margin-top:40px}
  .svc{grid-template-columns:1fr;gap:30px}
  .svc li h3{font-size:38px}
  .svc .pic img{height:360px}
  .two{grid-template-columns:1fr}
  .artist figure img{height:260px}
  .quote{padding:0 20px}
  .scope figcaption{flex-direction:column;gap:4px}
  .end{margin-top:90px;padding-top:80px}
  .info{grid-template-columns:1fr;gap:22px}
  .foot{flex-direction:column;gap:10px}
  .legal{padding:20px 20px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}