@font-face{font-family:"Denton XCondensed";src:url(fonts/denton-xcondensed-medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Denton XCondensed";src:url(fonts/denton-xcondensed-bolditalic.woff) format("woff");font-weight:700;font-style:italic;font-display:swap}

/* Layout: minimalista y aireado. Cabecera fija con logo central, foto a sangre, una línea de presentación, rejilla de tres fotos, ilustraciones de línea, mosaico oscuro y pie con el logo gigante. Un solo look claro, a propósito. */
:root {
  --bg: #fafafa;
  --fg: #000000;
  --muted: #5b5f55;
  --hair: #e2e2e0;
  --black: #000000;
  --white: #ffffff;
  --green: #1c2c1e;
  --green-2: #263a29;
  --sage: #657357;
  --sage-soft: #a3ad98;
  --cream: #fafafa;
  --serif: "Denton XCondensed", "Times New Roman", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; margin: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 40; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.in {
  max-width: none; margin-inline: auto;
  padding-left: max(clamp(16px, 2.65vw, 64px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 2.65vw, 64px), env(safe-area-inset-right, 0px));
}
.label { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

/* Logo */
.wm { font-family: var(--serif); font-weight: 500; font-synthesis: none; white-space: nowrap; line-height: 0.9; letter-spacing: -0.035em; text-decoration: none; display: inline-block; color: var(--green); }
.wm i { font-style: italic; font-weight: 700; font-size: 0.8em; margin-right: 0.01em; letter-spacing: -0.02em; }

/* Cabecera fija */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 41; background: var(--bg); }
.bar .in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 16px; }
.bar nav { display: flex; gap: clamp(16px, 1.4vw, 28px); flex-wrap: wrap; }
.bar nav a, .pill { text-transform: uppercase; text-decoration: none; font-family: var(--sans); font-weight: 400; font-size: clamp(0.68rem, 0.82vw, 0.8rem); letter-spacing: 0.01em; line-height: 1.2; }
.bar nav a { color: #6b6b6b; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--black); }
.bar .wm { font-size: 2.4rem; justify-self: center; }
.pill { display: inline-block; color: var(--black); justify-self: end; cursor: pointer; }
.pill:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .bar .in { grid-template-columns: 1fr auto; }
  .bar nav { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; }
  .bar .in { row-gap: 0; padding-bottom: 12px; }
  .bar .wm { justify-self: start; }
}

/* Imagen a sangre */
.photo { position: relative; height: clamp(220px, 30.5vw, 640px); background: var(--black); overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 53%; display: block; }

/* Presentación */
.intro { padding-block: clamp(36px, 5vw, 72px); text-align: center; }
.intro h1 { font-family: var(--sans); font-weight: 400; font-size: clamp(0.65rem, 0.8vw, 0.75rem); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.6; margin: 0 auto; text-wrap: balance; }
@media (min-width: 760px) { .intro h1 { white-space: nowrap; } }

/* Servicios: dos bloques grandes con foto */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 12px; }
@media (max-width: 760px) { .svc { grid-template-columns: minmax(0, 1fr); } }
.svc a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: var(--cream); text-decoration: none; }
.svc .bg { position: absolute; inset: 0; }
.svc .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc .s1 { background: linear-gradient(160deg, var(--green), var(--black)); }
.svc .s2 { background: linear-gradient(200deg, var(--green-2), var(--black)); }
.svc a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.6)); pointer-events: none; }
.svc .txt { position: absolute; z-index: 1; left: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 30px); }
.svc h2 { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: -0.01em; line-height: 1; margin: 0 0 8px; }
.svc p { font-size: clamp(0.7rem, 0.82vw, 0.8rem); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; opacity: 0.9; }
.svc .tag { position: absolute; z-index: 1; left: clamp(16px, 2vw, 32px); top: 14px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 62%, transparent); }
.svc a:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Páginas Sonido / Iluminación */
.pg { padding-block: clamp(40px, 6vw, 96px) clamp(28px, 3.5vw, 56px); text-align: center; }
.pg h1 { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(3rem, 9vw, 9rem); letter-spacing: -0.01em; line-height: 0.95; margin: 0 0 18px; color: var(--green); }
.pg .lead { font-size: clamp(0.7rem, 0.82vw, 0.8rem); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.6; max-width: 56ch; margin: 0 auto; text-wrap: balance; }
.incl { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .incl { grid-template-columns: minmax(0, 1fr); } }
.incl li { border-top: 1px solid var(--black); padding-top: 12px; font-size: clamp(0.7rem, 0.82vw, 0.8rem); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.5; }
.go { margin: 0 0 104px; text-align: center; }
.go a { font-size: clamp(0.7rem, 0.82vw, 0.8rem); text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.trio { padding-bottom: 40px; }
#home .trio { padding-bottom: 104px; }

/* Rejilla de tres */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 104px; }
#servicios { scroll-margin-top: 80px; }
@media (max-width: 760px) { .trio { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
figure { margin: 0; display: grid; gap: 12px; min-width: 0; }
figcaption { text-transform: uppercase; color: var(--green); font-size: 1.05rem; letter-spacing: 0.01em; }
.ph { aspect-ratio: 4 / 5; max-width: 100%; position: relative; display: block; overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph span { position: absolute; left: 14px; bottom: 12px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 70%, transparent); }
.t1 { background: linear-gradient(160deg, var(--green), var(--black)); }
.t2 { background: linear-gradient(200deg, var(--sage), var(--black)); }
.t3 { background: linear-gradient(140deg, var(--green-2), var(--green)); }

/* Ilustraciones de línea */
.ills { padding-bottom: 104px; }
.ills .label { margin-bottom: 40px; }
.ill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
@media (max-width: 960px) { .ill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ill-grid { grid-template-columns: minmax(0, 1fr); } }
.ill-item { display: grid; gap: 6px; min-width: 0; }
.ill { width: 100%; max-width: 320px; height: auto; display: block; color: var(--fg); margin-bottom: 18px; }
.ill-item h3 { font-family: var(--sans); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.ill-item p { margin: 0; color: var(--green); }

/* Mosaico oscuro */
.mosaic { background: var(--green); color: var(--white); padding-block: 40px 56px; }
.mosaic .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.mosaic .label { color: var(--white); }
.mosaic .hint { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { aspect-ratio: 4 / 5; min-width: 0; position: relative; overflow: hidden; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:nth-child(4n+1) { background: linear-gradient(160deg, var(--green), #060906); }
.tile:nth-child(4n+2) { background: linear-gradient(200deg, var(--sage), #0a0d0a); }
.tile:nth-child(4n+3) { background: color-mix(in srgb, var(--green-2) 50%, var(--black)); }
.tile:nth-child(4n) { background: linear-gradient(140deg, var(--green-2), var(--green)); }

/* Pie */
footer { background: var(--bg); }
.cols { border-top: 1px solid #cfcfcb; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; padding-block: 64px 24px; align-items: start; }
@media (max-width: 800px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols h4 { font-family: var(--sans); font-weight: 400; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 18px; }
.cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cols li, .cols a { color: var(--green); text-decoration: none; }
.cols a:hover { text-decoration: underline; }
.cols li.ph-text { user-select: all; }
.ask { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 420px; font-family: var(--sans); font-size: 0.98rem; text-align: left; color: var(--muted); background: #efefef; border: 0; border-radius: 999px; padding: 18px 24px; cursor: pointer; }
.ask b { font-weight: 400; color: var(--black); font-size: 1.2rem; }
.ask:hover { background: #e6e6e6; }
.status { color: var(--green); font-size: 0.92rem; min-height: 1.5em; margin: 12px 0 0; }
.giant { padding-block: 40px 28px; overflow: hidden; }
.giant .wm { font-size: clamp(6rem, 25vw, 22rem); color: var(--green); }
.base { border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 14px 28px; color: var(--muted); font-size: 0.88rem; }

.kick{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:104px}
.fc{container-type:inline-size;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--green);color:var(--cream);margin:0}
.fc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.06) brightness(1.04)}
.fc::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,44,30,.12),rgba(28,44,30,.3));mix-blend-mode:multiply}
.fc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;background:linear-gradient(0deg,rgba(6,10,6,.72),transparent)}
.fc svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.fc svg path{fill:none;stroke:var(--cream);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.95}
.fc svg .ld{stroke-width:1.2;opacity:.8}
.fc .tag{position:absolute;z-index:3;transform:translate(-50%,-100%);font-size:max(11.5px,3.7cqw);font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:.55em .8em;background:var(--cream);color:var(--green);line-height:1}
.fc .tag{opacity:0;transition:opacity .6s ease 1.1s}
.fc.on .tag{opacity:1}
.fc svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.6,.1,.2,1)}
.fc svg .ld{transition-delay:.9s;transition-duration:.5s}
.fc.on svg path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.fc svg path{stroke-dashoffset:0;transition:none}.fc .tag{opacity:1;transition:none}}
.fc figcaption{color:#fafafa;position:absolute;z-index:3;left:18px;right:18px;bottom:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.fc figcaption small{position:absolute;left:0;bottom:100%;margin-bottom:8px;white-space:nowrap;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.fc figcaption i{font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.2em;opacity:.8}
.fc figcaption b{font-family:var(--serif);font-weight:500;font-size:max(28px,9.6cqw);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.fc:nth-child(1) img{filter:saturate(1.12) contrast(1.04) brightness(1.02)}
.fc:nth-child(1)::before{background:linear-gradient(180deg,rgba(28,44,30,0),rgba(28,44,30,.12))}
.fc.empty{background:linear-gradient(160deg,var(--green),#060906)}
.fc.empty::before{display:none}
.fc .soon{position:absolute;left:18px;top:16px;z-index:3;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
@media (max-width:700px){.feat{grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:72px}}
.wa{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fafafa;color:var(--green);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 0 1px rgba(28,44,30,.22);transition:transform .2s ease,background .2s ease,color .2s ease}
.wa:hover{transform:translateY(-2px);background:var(--green);color:#fafafa}
.wa svg{width:26px;height:26px;fill:currentColor;flex:none}

.contact{background:var(--bg);padding:120px 0 140px;min-height:60vh;display:flex;align-items:center}
.contact>.in{width:100%}
.contact .cwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:end}
.contact h2{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,9vw,8rem);line-height:.9;text-transform:uppercase;letter-spacing:-.01em;margin:0;color:var(--green)}
.contact .sub{margin:18px 0 0;color:var(--muted);font-size:1.05rem}
.contact form{display:grid;gap:22px;max-width:480px;width:100%}
.contact label{display:grid;gap:6px}
.contact label span{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contact input{font:inherit;font-size:1.1rem;color:var(--black);background:transparent;border:0;border-bottom:1px solid var(--green);border-radius:0;padding:8px 0 10px;outline:none}
.contact input:focus{border-bottom-width:2px;padding-bottom:9px}
.contact input.bad{border-bottom-color:#a33}
.contact .send{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;justify-self:start;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fafafa;background:var(--green);border:0;border-radius:999px;padding:17px 26px;cursor:pointer}
.contact .send b{font-weight:400;font-size:1.1rem}
.contact .send:hover{background:var(--green-2)}
@media (max-width:800px){.contact{padding:56px 0 72px;min-height:0;display:block}.contact .cwrap{grid-template-columns:minmax(0,1fr);align-items:start}}
.contact .cwrap{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:36px;align-items:start}
.contact form{margin-inline:auto;text-align:left}
.contact .send{justify-self:center}
.contact .status{text-align:center}
.tel{display:flex;align-items:center;width:100%;max-width:420px;background:#efefef;border-radius:999px;padding:6px 8px 6px 24px}
.tel input{flex:1;min-width:0;font:inherit;font-size:.98rem;color:var(--black);background:transparent;border:0;outline:none;padding:12px 0}
.tel input::placeholder{color:var(--muted)}
.tel button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--black);font-size:1.25rem;cursor:pointer}
.tel button:hover{background:#e0e0e0}
.tel.bad{box-shadow:0 0 0 1.5px #a33}
.base{padding-right:76px}
.cols h4{color:#000}
.cols li,.cols a,.cols .ph-text{color:var(--green)}
.tel input,.tel button{color:var(--green)}
.tel input::placeholder{color:var(--green);opacity:.85}
.tel button{color:var(--green)}
.base,.base span{color:var(--green)}
footer .status{color:var(--green)}
.bar nav a,.bar nav a:hover,.bar nav a[aria-current],.bar .pill{color:var(--green)}
.bar nav a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.mosaic .more{color:#fafafa;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(250,250,250,.6);padding-bottom:2px}
.bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(64px,9vw,140px)}
.bd.rev .bcover{order:2}
.bcover{position:relative;aspect-ratio:4/5;overflow:hidden;margin:0;background:var(--green)}
.bcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.binfo h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(2.6rem,6vw,6rem);line-height:.92;letter-spacing:-.01em;color:var(--green);margin:0 0 16px}
.bmeta{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--green);margin:0 0 20px}
.btags{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:8px}
.btags li{border:1px solid var(--green);color:var(--green);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px}
.bgal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px}
.bg{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--green),#060906)}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bg span{position:absolute;left:12px;bottom:10px;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,250,250,.65)}
@media (max-width:800px){.bd{grid-template-columns:minmax(0,1fr);gap:24px}.bd.rev .bcover{order:0}}

.contact h1{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,9vw,8rem);line-height:.9;text-transform:uppercase;letter-spacing:-.01em;margin:0;color:var(--green)}
.in{max-width:1240px}
.status a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bar .in{max-width:1240px}
.skip{position:absolute;left:-9999px;top:0;background:#1c2c1e;color:#fafafa;padding:10px 14px;z-index:100}.skip:focus{left:8px;top:8px}