/* Trabajos · BAI Marketing — mismos tokens que baimarketing.es (medidos del sitio:
   fondo #0A0A0A, panel #141414, crema #F2EFE9, acento #FF3617, sin border-radius).
   Contrastes calculados ANTES de escribir esto:
     crema/negro 17,25 · crema/panel 16,05 · acento/negro 5,46 · acento/panel 5,08
     negro sobre acento 5,46 (el texto del boton VA EN NEGRO: crema sobre acento es 3,16)
     crema al 62% sobre negro 6,88 · al 55% 5,60 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
:root{
  --bg:#0A0A0A; --panel:#141414; --crema:#F2EFE9; --acento:#FF3617;
  --dim:rgba(242,239,233,.62); --dim2:rgba(242,239,233,.55);
  --filo:1px solid rgba(242,239,233,.14);
  --filo-fuerte:1px solid rgba(242,239,233,.28);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--crema);font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(1280px,92vw);margin:0 auto}
.mono{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* ---------- cabecera ---------- */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:14px min(4vw,32px);background:rgba(10,10,10,.92);backdrop-filter:blur(8px);
  border-bottom:var(--filo)}
.hdr b{font-family:"Big Shoulders Display",sans-serif;font-size:1.6rem;font-weight:800;
  letter-spacing:.02em;line-height:1}
.hdr .mono{margin-right:auto}
.hdr a.cta{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--acento);color:#0A0A0A;padding:10px 16px;
  font-weight:500;transition:background .2s}
.hdr a.cta:hover{background:#FF8C5A}
.hdr a.volver{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid transparent}
.hdr a.volver:hover{color:var(--crema);border-bottom-color:var(--acento)}

/* ---------- portada ---------- */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(32px,5vw,56px);border-bottom:var(--filo)}
.hero h1{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(3rem,11vw,7.5rem);line-height:.88;letter-spacing:-.01em;
  text-transform:uppercase;margin:18px 0 24px}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero p.intro{max-width:60ch;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--dim)}
.cifras{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:var(--filo)}
.cifras div{flex:1 1 180px;padding:18px 20px 18px 0;border-bottom:var(--filo)}
.cifras span{display:block;font-family:"JetBrains Mono",monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:6px}
.cifras b{font-family:"Big Shoulders Display",sans-serif;font-size:2.4rem;font-weight:700;
  line-height:1;display:block}

/* ---------- filtros ---------- */
.filtros{position:sticky;top:57px;z-index:40;display:flex;flex-wrap:wrap;gap:8px;
  padding:16px 0;background:rgba(10,10,10,.94);backdrop-filter:blur(8px);
  border-bottom:var(--filo)}
.filtros button{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);background:transparent;border:var(--filo);
  padding:8px 13px;cursor:pointer;transition:.18s}
.filtros button:hover{color:var(--crema);border-color:rgba(242,239,233,.4)}
.filtros button[aria-pressed="true"]{background:var(--crema);color:#0A0A0A;
  border-color:var(--crema);font-weight:500}

/* ---------- rejilla ---------- */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(242,239,233,.14);border:var(--filo);margin:36px 0 0}
.ficha{background:var(--panel);display:flex;flex-direction:column;
  transition:background .2s}
.ficha:hover{background:#191919}
.ficha.oculta{display:none}
.ficha .lienzo{position:relative;overflow:hidden;aspect-ratio:16/10;background:#0A0A0A;
  border-bottom:var(--filo)}
.ficha .lienzo img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s ease}
.ficha:hover .lienzo img{transform:scale(1.035)}
.ficha .sello{position:absolute;top:0;left:0;font-family:"JetBrains Mono",monospace;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;background:#0A0A0A;
  color:var(--crema);padding:6px 10px;border-right:var(--filo);border-bottom:var(--filo)}
.ficha .sello.vivo{background:var(--acento);color:#0A0A0A;font-weight:500;border-color:var(--acento)}
.ficha .cuerpo{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:10px}
.ficha .sector{font-family:"JetBrains Mono",monospace;font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acento)}
.ficha h3{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:2rem;
  line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.ficha p{font-size:.92rem;color:var(--dim);line-height:1.55}
.ficha .mira{font-size:.85rem;color:var(--crema);border-left:2px solid var(--acento);
  padding-left:12px}
.ficha .pie{margin-top:auto;padding-top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;border-top:var(--filo)}
.ficha .paginas{font-family:"JetBrains Mono",monospace;font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim2)}
.ficha .abrir{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--crema);display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid rgba(242,239,233,.28);padding-bottom:2px;transition:.18s}
.ficha .abrir:hover{color:var(--acento);border-bottom-color:var(--acento)}
.ficha .abrir svg{width:13px;height:13px}

/* ---------- cierre ---------- */
.cierre{padding:clamp(64px,9vw,110px) 0 40px;margin-top:60px;border-top:var(--filo)}
.cierre h2{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(2.4rem,7vw,5rem);line-height:.9;text-transform:uppercase;margin:14px 0 20px}
.cierre h2 em{font-style:normal;color:var(--acento)}
.cierre p{max-width:60ch;color:var(--dim)}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--acento);color:#0A0A0A;font-weight:500;
  padding:14px 20px;display:inline-flex;align-items:center;gap:9px;transition:background .2s}
.btn:hover{background:#FF8C5A}
.btn svg{width:15px;height:15px}
.btn--fantasma{background:transparent;color:var(--crema);border:var(--filo-fuerte)}
.btn--fantasma:hover{background:rgba(242,239,233,.08)}
.nota{margin-top:44px;padding:18px 20px;border:var(--filo);font-size:.84rem;
  color:var(--dim);max-width:78ch}

/* ---------- pie ---------- */
.ftr{border-top:var(--filo);padding:22px 0;margin-top:40px}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim2)}

/* ---------- entrada ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ficha .lienzo img{transition:none}
}

/* ---------- adaptable ---------- */
@media (max-width:1080px){ .rejilla{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){
  .rejilla{grid-template-columns:1fr}
  .hdr .mono{display:none}
  .filtros{top:53px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px}
  .filtros button{white-space:nowrap}
  .ficha h3{font-size:1.7rem}
}

/* texto solo para lectores de pantalla: los enlaces "Abrir" repetidos necesitan
   decir de que web hablan sin que se vea en pantalla */
.oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ================= fichas de caso =================
   Mismos tokens que la portada, ya medidos: crema/negro 17,25 · crema/panel 16,05
   acento/negro 5,46 · acento/panel 5,08 · crema al 62% sobre negro 6,88.
   El texto sobre acento va SIEMPRE en negro (crema sobre acento seria 3,16). */
.hdr .marca{display:inline-flex;align-items:center}
.caso{padding:28px 0 0}
.caso .wrap{width:min(1180px,92vw)}
.miga{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px;
  padding-bottom:26px;border-bottom:var(--filo)}
.miga a{border-bottom:1px solid transparent}
.miga a:hover{color:var(--crema);border-bottom-color:var(--acento)}
.caso article{max-width:74ch;margin:0 auto;padding:44px 0 0}
.caso article > .mono{color:var(--acento)}
.caso h1{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:.92;text-transform:uppercase;
  margin:14px 0 22px}
.caso .entradilla{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--crema);line-height:1.55}
.caso h2{font-family:"Big Shoulders Display",sans-serif;font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;text-transform:uppercase;
  margin:52px 0 16px}
.caso p{color:var(--dim);margin-bottom:16px}
.caso .entradilla{margin-bottom:0}
.datos{display:flex;flex-wrap:wrap;align-items:center;gap:0 34px;margin:32px 0 8px;
  padding:20px 0;border-top:var(--filo);border-bottom:var(--filo)}
.datos div{padding:6px 0}
.datos span{display:block;font-family:"JetBrains Mono",monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:4px}
.datos b{font-family:"Big Shoulders Display",sans-serif;font-size:1.5rem;font-weight:700;
  line-height:1.1}
.foto{margin:34px 0}
.foto img{width:100%;border:var(--filo)}
.foto figcaption{margin-top:10px;font-family:"JetBrains Mono",monospace;font-size:.68rem;
  letter-spacing:.06em;color:var(--dim);line-height:1.5}
.lleva{list-style:none;margin:0 0 8px;padding:0}
.lleva li{position:relative;padding:12px 0 12px 26px;border-bottom:var(--filo);color:var(--dim)}
.lleva li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:1px;
  background:var(--acento)}
.faq{margin-top:8px}
.faq .pregunta{padding:18px 0;border-bottom:var(--filo)}
.faq h3{font-family:"Inter",sans-serif;font-size:1rem;font-weight:600;color:var(--crema);
  margin-bottom:8px;text-transform:none;letter-spacing:0}
.faq p{margin:0}
.llamada{margin:56px 0 0;padding:32px;border:var(--filo);background:var(--panel)}
.llamada h2{margin-top:0}
.caso .nota{margin:34px 0 0;padding:16px 18px;border:var(--filo);font-size:.84rem;
  color:var(--dim)}
.otros{margin:70px 0 0;padding-top:40px;border-top:var(--filo)}
.otros h2{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:2rem;
  text-transform:uppercase;margin-bottom:22px}
.otros__rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(242,239,233,.14);border:var(--filo)}
.otro{background:var(--panel);display:block;padding-bottom:16px;transition:background .2s}
.otro:hover{background:#191919}
.otro img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-bottom:var(--filo);margin-bottom:12px}
.otro__sector{display:block;padding:0 16px;font-family:"JetBrains Mono",monospace;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);
  margin-bottom:4px}
.otro__nom{display:block;padding:0 16px;font-family:"Big Shoulders Display",sans-serif;
  font-size:1.5rem;font-weight:700;text-transform:uppercase;line-height:1}
.volver-todos{margin-top:24px}
.volver-todos a{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--crema);display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(242,239,233,.28);padding-bottom:3px}
.volver-todos a:hover{color:var(--acento);border-bottom-color:var(--acento)}
.volver-todos svg{width:13px;height:13px}
.ftr a{border-bottom:1px solid transparent}
.ftr a:hover{color:var(--crema);border-bottom-color:var(--acento)}
.ficha h3 a{display:block}
.ficha .ver{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acento);display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid transparent;padding-bottom:2px}
.ficha .ver:hover{border-bottom-color:var(--acento)}
.ficha .ver svg{width:13px;height:13px}
.ficha .abrir{color:var(--dim);border-bottom-color:rgba(242,239,233,.2)}
.ficha .abrir:hover{color:var(--crema);border-bottom-color:var(--crema)}
@media (max-width:900px){
  .otros__rejilla{grid-template-columns:1fr}
  .llamada{padding:22px}
  .datos{gap:0 22px}
}