
/* =========================================================
   JAC MOTORS · CASE STUDY LOCAL STYLES
   Scope: /casos-de-exito/marketing-digital-automotriz-jac-motors/
   No modifica CSS global de B2W.
   ========================================================= */

.jac-hero-video{
  aspect-ratio:16/9;
  max-height:none;
  background:#020915;
}
.jac-hero-video::after{display:none}
.jac-hero-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#020915;
}
.jac-hero-video figcaption{
  pointer-events:none;
}

/* Professional tables */
.jac-table-wrap{
  margin:1.5rem 0 2rem;
  overflow-x:auto;
  border:1px solid rgba(32,86,248,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 45px rgba(5,20,47,.06);
}
.jac-table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  font-size:.94rem;
}
.jac-table th{
  padding:1rem 1.05rem;
  text-align:left;
  color:#fff;
  background:#071a38;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.08);
}
.jac-table td{
  padding:1rem 1.05rem;
  vertical-align:top;
  border-top:1px solid #e7edf6;
  border-right:1px solid #eef2f7;
  color:#263752;
  line-height:1.55;
}
.jac-table tbody tr:nth-child(even){background:#f8fbff}
.jac-table tbody tr:hover{background:#f1f6ff}
.jac-table td:last-child,.jac-table th:last-child{border-right:0}

/* Lead-to-sale process */
.jac-process{
  list-style:none!important;
  counter-reset:jacstep;
  padding:0!important;
  margin:1.35rem 0 2rem!important;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}
.jac-process li{
  counter-increment:jacstep;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:.75rem;
  align-items:start;
  padding:.9rem 1rem;
  margin:0!important;
  border:1px solid #e1e8f3;
  border-radius:14px;
  background:#fbfdff;
  min-height:0;
}
.jac-process li::before{
  content:counter(jacstep, decimal-leading-zero);
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#0e1a47;
  color:#fff;
  font-size:.7rem;
  font-weight:800;
  line-height:1;
}
.jac-process li > strong{
  display:block;
  color:#0e1a47;
  line-height:1.3;
}
.jac-process li > span{
  grid-column:2;
  display:block;
  margin-top:-.2rem;
  color:#586981;
  line-height:1.45;
  font-size:.9rem;
}
/* Creative accordion gallery adapted from the provided reference */
.jac-gallery{
  margin:1.75rem 0 .7rem;
}
.jac-gallery__grid{
  --active:0;
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:grid;
  grid-template-columns:5fr 1fr 1fr 1fr 1fr 1fr;
  gap:8px;
  min-height:520px;
  transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1);
}
.jac-gallery__item{
  position:relative;
  min-width:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(14,26,71,.12);
  background:#081326;
  cursor:pointer;
  outline:none;
  box-shadow:0 10px 30px rgba(5,15,35,.08);
}
.jac-gallery__item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
  filter:grayscale(.35) saturate(.85);
  transition:transform .35s ease,filter .35s ease;
}
.jac-gallery__item[data-active="true"] img{
  transform:scale(1);
  filter:none;
}
.jac-gallery__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(2,9,21,.82),rgba(2,9,21,.12) 55%,rgba(2,9,21,.02));
}
.jac-gallery__content{
  position:absolute;
  inset:auto 0 0;
  padding:1rem;
  color:#fff;
  opacity:.14;
  transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease;
}
.jac-gallery__item[data-active="true"] .jac-gallery__content{
  opacity:1;
  transform:none;
}
.jac-gallery__kicker{
  display:block;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.14em;
  color:#8fd9ff;
}
.jac-gallery__content h3{
  color:#fff!important;
  margin:.25rem 0 .2rem!important;
  font-size:1.15rem!important;
}
.jac-gallery__content p{
  margin:0!important;
  color:rgba(255,255,255,.82)!important;
  font-size:.82rem!important;
  line-height:1.4!important;
}
.jac-gallery-caption{
  margin-top:.55rem!important;
  color:#718198!important;
  font-size:.8rem!important;
}

@media(max-width:900px){
  .jac-hero-video{width:100%;aspect-ratio:16/9}
  .jac-gallery__grid{
    min-height:auto;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .jac-gallery__item{aspect-ratio:3/5}
  .jac-gallery__content{opacity:1;transform:none}
  .jac-gallery__item img{filter:none}
}
@media(max-width:760px){
  .jac-hero-video{
    margin-top:.2rem;
    border-radius:18px;
    overflow:hidden;
  }
  .jac-gallery__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px;
  }
  .jac-table{min-width:620px}
  .jac-process{grid-template-columns:1fr}
}
@media(max-width:420px){
  .jac-gallery__content{padding:.7rem}
  .jac-gallery__content h3{font-size:1rem!important}
  .jac-gallery__content p{font-size:.72rem!important}
}

/* =========================================================
   V2 — EDITORIAL REFINEMENT · PAGE-SCOPED ONLY
   Global header, nav and footer intentionally untouched.
   Loaded after /assets/css/article.css.
   ========================================================= */
body.article-page .b2w-article-hero__grid{
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.5rem,3.5vw,3.5rem);
}
body.article-page .b2w-article-hero__copy{min-width:0;max-width:640px}
body.article-page .b2w-article-hero h1{
  font-size:clamp(2.35rem,3.25vw,3.15rem);
  line-height:1.105;
  letter-spacing:-.038em;
  max-width:620px;
  text-wrap:balance;
  margin:.5rem 0 1rem;
}
body.article-page .b2w-article-hero .article-deck{
  max-width:570px;
  font-size:clamp(1rem,1.15vw,1.12rem);
  line-height:1.62;
}
body.article-page .jac-hero-video{
  aspect-ratio:16/10;
  max-height:430px;
  border-radius:20px;
}
body.article-page .article-main{min-width:0}
body.article-page .jac-table-wrap{max-width:100%;scrollbar-width:thin;scrollbar-color:#9aabc6 #eef3f9}
body.article-page .jac-table th{line-height:1.4}
body.article-page .jac-table td{overflow-wrap:anywhere}
body.article-page .jac-table tbody tr:focus-within{background:#f1f6ff}
@media(max-width:1100px){
  body.article-page .b2w-article-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
  body.article-page .b2w-article-hero h1{font-size:clamp(2.2rem,4vw,2.85rem)}
}
@media(max-width:900px){
  body.article-page .b2w-article-hero__grid{grid-template-columns:1fr;gap:1.65rem}
  body.article-page .b2w-article-hero__copy{max-width:720px}
  body.article-page .b2w-article-hero h1{font-size:clamp(2.1rem,5vw,2.8rem)}
  body.article-page .jac-hero-video{max-width:760px;aspect-ratio:16/9;max-height:none}
}
@media(max-width:600px){
  body.article-page .b2w-article-hero h1{
    font-size:clamp(1.875rem,7.5vw,2.125rem);
    line-height:1.15;
    letter-spacing:-.03em;
    max-width:100%;
    margin:.45rem 0 .85rem;
  }
  body.article-page .b2w-article-hero .article-deck{font-size:1rem;line-height:1.58}
  body.article-page .jac-hero-video{border-radius:16px}
  body.article-page .jac-table-wrap{margin:1.15rem 0 1.6rem}
  body.article-page .jac-table th,body.article-page .jac-table td{padding:.8rem .85rem}
}
@media(prefers-reduced-motion:reduce){
  body.article-page .jac-gallery__grid,
  body.article-page .jac-gallery__item img,
  body.article-page .jac-gallery__content{transition:none}
}

/* =========================================================
   V2.3 — Typographic system, editorial rhythm and conversion
   Intentionally only loaded on the JAC Motors case-study URL.
   Site header, footer, menu, main scripts and media untouched.
   ========================================================= */
body.article-page .b2w-article-hero{padding-bottom:clamp(2.6rem,4vw,4rem)}
body.article-page .b2w-article-hero__copy>.eyebrow{line-height:1.5;letter-spacing:.115em}
body.article-page .b2w-article-hero h1{
  font-size:clamp(2.625rem,3.45vw,3rem);
  line-height:1.12;
  letter-spacing:-.038em;
  max-width:580px;
  overflow-wrap:normal;
}
body.article-page .b2w-article-hero__copy .article-meta{margin-top:1.25rem;line-height:1.5}
body.article-page .article-prose{font-size:clamp(1rem,1.05vw,1.075rem);line-height:1.76}
body.article-page .article-prose h2{
  font-size:clamp(1.75rem,2.35vw,2.125rem);
  line-height:1.21;
  letter-spacing:-.028em;
  margin:clamp(2.8rem,4.6vw,4rem) 0 1.05rem;
  max-width:26ch;
  overflow-wrap:break-word;
}
body.article-page .article-prose h3{
  font-size:clamp(1.3125rem,1.7vw,1.5rem);
  line-height:1.32;
  letter-spacing:-.02em;
  margin:2.15rem 0 .8rem;
  max-width:38ch;
  overflow-wrap:break-word;
}
body.article-page .article-prose h2::before{margin-bottom:.7rem;font-size:.625rem;line-height:1.5}
body.article-page .article-prose p{margin-bottom:1.2rem}
body.article-page .article-prose :is(h2,h3)+p{margin-top:0}
body.article-page .article-prose :is(h2,h3){scroll-margin-top:110px}
body.article-page .article-prose .jac-table-wrap{margin:1.25rem 0 2.1rem}
body.article-page .jac-table{font-size:.925rem}
body.article-page .jac-table th{letter-spacing:.035em}
body.article-page .jac-table td{line-height:1.6}
body.article-page .jac-table-wrap:focus-visible{outline:3px solid #2056f8;outline-offset:3px}
body.article-page .article-side-cta h2{font-size:clamp(1.55rem,2vw,1.85rem);line-height:1.18;letter-spacing:-.025em}
body.article-page .article-author-module h2{font-size:clamp(1.65rem,2.5vw,2.3rem);line-height:1.18}
body.article-page .article-faq-band h2{font-size:clamp(1.95rem,3.1vw,2.9rem);line-height:1.12}
body.article-page .article-next h2{font-size:clamp(1.95rem,3.2vw,3rem);line-height:1.12}
/* Result cards are additional presentation, original results table remains */
body.article-page .jac-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0 .9rem}
body.article-page .jac-kpi{background:linear-gradient(145deg,#071a38,#10346a);border:1px solid rgba(68,135,223,.35);border-radius:17px;padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;min-width:0;box-shadow:0 14px 32px rgba(6,27,61,.12)}
body.article-page .jac-kpi strong{color:#fff;font-size:clamp(1.85rem,3vw,2.45rem);font-weight:800;line-height:1.07;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
body.article-page .jac-kpi span{color:#d8e7ff;font-size:.85rem;line-height:1.4;font-weight:600}
body.article-page .article-prose .jac-kpi-caption{margin:.25rem 0 1.35rem;color:#62748e;font-size:.83rem;line-height:1.55}
@media(max-width:900px){
 body.article-page .b2w-article-hero h1{font-size:clamp(2.25rem,5vw,2.85rem);max-width:580px}
 body.article-page .article-prose h2{max-width:100%}
}
@media(max-width:600px){
 body.article-page .b2w-article-hero h1{font-size:clamp(1.875rem,7.5vw,2.125rem);line-height:1.16;max-width:100%}
 body.article-page .article-prose{font-size:1rem;line-height:1.72}
 body.article-page .article-prose h2{font-size:clamp(1.5rem,6vw,1.75rem);line-height:1.25;margin:2.7rem 0 .9rem}
 body.article-page .article-prose h3{font-size:clamp(1.1875rem,5vw,1.3125rem);line-height:1.32;margin:1.9rem 0 .75rem}
 body.article-page .jac-kpi-grid{gap:.65rem}
 body.article-page .jac-kpi{padding:1rem .85rem;border-radius:13px}
 body.article-page .jac-kpi strong{font-size:clamp(1.5rem,6vw,1.95rem)}
 body.article-page .jac-kpi span{font-size:.75rem}
 body.article-page .article-side-cta h2{font-size:1.65rem}
 body.article-page .article-faq-band h2{font-size:clamp(1.75rem,7vw,2.1rem)}
 body.article-page .article-next h2{font-size:clamp(1.75rem,7vw,2.15rem)}
}
@media(max-width:350px){body.article-page .jac-kpi-grid{grid-template-columns:1fr}}
