/* ═══════════════════════════════════════════════════════════
   CHANCHO LIBRE · EMPRESAS
   Hoja propia de la pata corporativa. No toca estilo.css
   (que sigue sirviendo a artistas / index / sumarme).

   Criterio: galería, no taller. Fondo neutro, el color lo
   ponen las obras y las fotos. Serif editorial para los
   titulares, sans para todo lo operativo.
   ═══════════════════════════════════════════════════════════ */

:root{
  --blanco:#FFFFFF;
  --hueso:#F3F3F1;
  --hueso2:#E8E8E4;
  --tinta:#101418;
  --tinta2:#5B646B;
  --tinta3:#8C959B;
  --linea:#DEDEDA;
  --hondo:#0B2E4F;
  --hondo2:#123A61;
  --celeste:#8FCEE0;
  --rosa:#FF3D6A;
  --oro:#C9A227;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.sec{padding:72px 0}
.sec.ap{padding-top:0}

/* ── Tipografía ── */
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1{font-family:var(--serif);font-size:clamp(38px,4.6vw,64px);line-height:1.02}
h2{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);line-height:1.06}
h3{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic}
p{margin:0}
.lead{font-size:19px;line-height:1.62;color:var(--tinta2);max-width:58ch}
.lead b,.lead strong{color:var(--tinta);font-weight:600}
.txt{font-size:16.5px;line-height:1.72;color:var(--tinta2);max-width:62ch}
.txt + .txt{margin-top:16px}
.txt b,.txt strong{color:var(--tinta);font-weight:600}

.rot{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta3);
  display:block;margin-bottom:18px;
}
.rot.mar{color:var(--rosa)}
.rot.cl{color:var(--celeste)}

/* ── Navegación ── */
nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);
}
.nav-in{
  max-width:1240px;margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo svg{width:30px;height:37px;flex:none;display:block}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font-weight:800;font-size:16px;letter-spacing:.09em;color:var(--tinta)}
.logo .wm i{font-weight:300;font-size:16px;letter-spacing:.42em;font-style:normal;color:var(--tinta);margin-top:3px}
.nav-der{display:flex;align-items:center;gap:28px}
.nav-l{
  font-size:14px;font-weight:500;color:var(--tinta2);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav-l:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
.nav-cta{
  background:var(--tinta);color:var(--blanco);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.02em;padding:12px 22px;
  transition:background .18s;white-space:nowrap;
}
.nav-cta:hover{background:var(--hondo)}
@media(max-width:820px){.nav-l{display:none}}

/* ── Hero ──
   Dos columnas: el texto y la foto conviven en la misma franja. La foto entra
   dentro del hero, no como una banda separada debajo. */
.hero{
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
  max-width:1240px;margin:0 auto;padding:52px 40px 60px;
}
.hero h1{max-width:14ch}
.hero .lead{margin-top:22px;max-width:44ch;font-size:17.5px}
.hero .remate{
  margin-top:16px;font-size:20px;line-height:1.42;color:var(--tinta);max-width:30ch;
  font-family:var(--serif);
}
.hero .remate b{font-weight:400;font-style:italic;color:var(--hondo)}
.hero-acc{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-foto{aspect-ratio:4/5;overflow:hidden;background:var(--hueso)}
.hero-foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding:36px 24px 44px}
  .hero-foto{aspect-ratio:4/3}
}

/* ── Banda de foto a lo ancho (una sola en toda la página) ── */
.banda{height:min(52vh,460px);overflow:hidden;background:var(--hueso);margin-bottom:72px}
.banda img{width:100%;height:100%;object-fit:cover}
.btn{
  display:inline-block;text-decoration:none;font-size:14px;font-weight:600;
  padding:15px 28px;transition:all .18s;
}
.btn-p{background:var(--tinta);color:var(--blanco)}
.btn-p:hover{background:var(--hondo)}
.btn-s{border:1px solid var(--tinta);color:var(--tinta)}
.btn-s:hover{background:var(--tinta);color:var(--blanco)}

.hero-foto{margin-top:56px;height:min(62vh,560px);overflow:hidden;background:var(--hueso)}
.hero-foto img{width:100%;height:100%;object-fit:cover}

/* ── Barra de datos ── */
.datos{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--linea);
}
.datos div{padding:30px 28px 30px 0;border-right:1px solid var(--linea)}
.datos div:last-child{border-right:0}
.datos b{
  display:block;font-family:var(--serif);font-size:38px;line-height:1;
  color:var(--hondo);font-variant-numeric:tabular-nums;
}
.datos span{
  display:block;font-size:13.5px;color:var(--tinta2);margin-top:10px;line-height:1.45;
}
@media(max-width:820px){.datos{grid-template-columns:1fr 1fr}.datos div{border-bottom:1px solid var(--linea)}}

/* ── Dos columnas de texto ── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.dos .tit{max-width:16ch}
@media(max-width:900px){.dos{grid-template-columns:1fr;gap:32px}}

/* ── Franja de fotos ──
   El object-position de cada img va inline: sale de detectar dónde están las
   caras en esa foto, así el recorte nunca cae sobre una cabeza. */
.franja{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:52px}
.franja figure{margin:0;height:340px;overflow:hidden;background:var(--hueso)}
.franja img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.franja figure:hover img{transform:scale(1.03)}
@media(max-width:900px){.franja{grid-template-columns:1fr}.franja figure{height:260px}}

/* ── Los tiempos ── */
.tiempos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px}
.tiempo{padding:32px 30px 32px 0;border-top:2px solid var(--tinta)}
.tiempo + .tiempo{padding-left:30px;border-left:1px solid var(--linea)}
.tiempo .hh{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--rosa);display:block;margin-bottom:14px;
}
.tiempo h3{margin-bottom:10px}
.tiempo p{font-size:14.5px;line-height:1.62;color:var(--tinta2)}
@media(max-width:900px){
  .tiempos{grid-template-columns:1fr 1fr}
  .tiempo + .tiempo{padding-left:0;border-left:0}
  .tiempo:nth-child(even){padding-left:30px;border-left:1px solid var(--linea)}
}
@media(max-width:560px){
  .tiempos{grid-template-columns:1fr}
  .tiempo:nth-child(even){padding-left:0;border-left:0}
}

/* ── Bloque oscuro: lo que nadie junta ── */
.oscuro{background:var(--tinta);color:#D9DEE2}
.oscuro h2{color:var(--blanco)}
.oscuro .txt{color:#9AA5AD}
.oscuro .txt b{color:var(--blanco)}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#242A2F;margin-top:56px}
.tres article{background:var(--tinta);padding:38px 34px 42px}
.tres .k{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--celeste);display:block;margin-bottom:20px;
}
.tres h3{color:var(--blanco);font-size:21px;margin-bottom:12px}
.tres p{font-size:14.5px;line-height:1.68;color:#9AA5AD}
.tres p b{color:var(--blanco);font-weight:600}
.tres .pie{
  margin-top:22px;padding-top:16px;border-top:1px solid #2C3339;
  font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--tinta3);
}
@media(max-width:900px){.tres{grid-template-columns:1fr}}

/* ── Ocasiones ── */
.ocasiones{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);margin-top:52px;border:1px solid var(--linea)}
.oc{background:var(--blanco);padding:34px 32px;transition:background .2s}
.oc:hover{background:var(--hueso)}
.oc b{display:block;font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.oc p{font-size:14.5px;line-height:1.6;color:var(--tinta2)}
@media(max-width:900px){.ocasiones{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ocasiones{grid-template-columns:1fr}}

/* ── Incluye ── */
.incluye{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);margin-top:52px;border:1px solid var(--linea)}
.inc{background:var(--blanco);padding:40px 38px}
.inc.gris{background:var(--hueso)}
.inc h3{margin-bottom:6px}
.inc .sub{font-size:14px;color:var(--tinta3);font-style:italic;margin-bottom:24px}
.inc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.inc li{font-size:15px;line-height:1.55;color:var(--tinta2);padding-left:22px;position:relative}
.inc li::before{
  content:"";position:absolute;left:0;top:10px;width:11px;height:1px;background:var(--rosa);
}
.inc li b{color:var(--tinta);font-weight:600}
@media(max-width:900px){.incluye{grid-template-columns:1fr}}

/* ── Mosaico ── */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:8px;margin-top:52px}
.mosaico figure{margin:0;overflow:hidden;background:var(--hueso)}
.mosaico figure.g2{grid-column:span 2}
.mosaico figure.v2{grid-row:span 2}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.mosaico figure:hover img{transform:scale(1.04)}
@media(max-width:900px){.mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}}

/* ── Quién ── */
.quien{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}
.quien .foto{aspect-ratio:4/5;overflow:hidden;background:var(--hueso)}
.quien .foto img{width:100%;height:100%;object-fit:cover}
.quien .cita{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);line-height:1.24;color:var(--tinta)}
.quien .firma{
  margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta3);line-height:1.7;
}
@media(max-width:820px){.quien{grid-template-columns:1fr;gap:28px}.quien .foto{max-width:280px}}

/* ── Cierre ── */
.cierre{background:var(--hondo);color:#C6DBE8;text-align:center;padding:96px 0}
.cierre h2{color:var(--blanco);margin:0 auto 20px;max-width:20ch}
.cierre .lead{color:#9FC0D4;margin:0 auto 36px;text-align:center;max-width:50ch}
.cierre .btn-p{background:var(--blanco);color:var(--hondo)}
.cierre .btn-p:hover{background:var(--celeste);color:var(--tinta)}
.cierre .rot{color:var(--celeste)}

/* ── Pie ── */
footer{background:var(--tinta);color:var(--tinta3);padding:52px 0 46px;font-size:13px}
.pie-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer .logo .wm b,footer .logo .wm i{color:var(--blanco)}
.pie-nav{display:flex;gap:26px;flex-wrap:wrap}
footer a{color:var(--tinta3);text-decoration:none}
footer a:hover{color:var(--blanco)}
.pie-legal{margin-top:34px;padding-top:22px;border-top:1px solid #242A2F;font-size:12px;line-height:1.7}

:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media(max-width:640px){
  .wrap{padding:0 24px}
  .nav-in{padding:14px 24px}
  .sec{padding:64px 0}
}