/* =========================================================
   Doble® — Página de caso
   Usa los tokens y componentes de ../styles.css (grilla, tipografía,
   reveals, navegador + teléfono). Acá solo lo propio del caso.
   ========================================================= */

/* ---------- Cabecera ---------- */
.ch { padding-top: calc(64px + clamp(2.5rem, 6vw, 6rem)); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.ch__back { display: inline-flex; gap: .5em; font-size: var(--fs-s); color: var(--muted); margin-bottom: clamp(2.5rem, 6vw, 5rem); transition: color .3s; }
.ch__back:hover { color: var(--fg); }
.ch__head { align-items: end; row-gap: 1.25rem; }
.ch__label { grid-column: 1 / 13; }
.ch__title { grid-column: 1 / 9; font-size: clamp(4.2rem, 17vw, 18rem); font-weight: 600; letter-spacing: -.065em; line-height: .82; }
.ch__lead { grid-column: 9 / 13; font-size: var(--fs-m); line-height: 1.25; letter-spacing: -.015em; padding-bottom: .6em; }
.ch__meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); padding-top: 1rem;
}
.ch__meta dt { font-size: var(--fs-s); color: var(--muted); margin-bottom: .3rem; }
.ch__meta dd { margin: 0; font-weight: 500; }
.ch__link { border-bottom: 1px solid currentColor; }
.ch__link:hover { color: var(--muted); }

/* ---------- Film a todo el ancho ---------- */
.cfilm { margin: 0; }
.cfilm__btn { display: block; position: relative; width: 100%; padding: 0; text-align: left; }
.cfilm__media { display: block; aspect-ratio: 16 / 9; max-height: 92svh; width: 100%; border-radius: 0; }
.cfilm__tag {
  position: absolute; left: var(--gutter); top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: .5em; font-size: 12px; color: rgba(255, 255, 255, .9);
}
.cfilm__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s steps(2) infinite; }
.cfilm__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(76px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); color: var(--ink); display: grid; place-items: center;
  font-weight: 500; font-size: .875rem; transition: transform .6s var(--ease);
}
.cfilm__btn:hover .cfilm__play { transform: scale(1.1); }
.cfilm__btn:hover video { transform: scale(1.02); }

/* ---------- Resumen ---------- */
.csum__label { grid-column: 1 / 3; padding-top: .6em; }
.csum__title { grid-column: 3 / 13; }
.csum__copy { grid-column: 7 / 12; margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1em; }
.csum__copy p:first-child { font-size: var(--fs-m); line-height: 1.3; letter-spacing: -.015em; }
.cstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(4rem, 8vw, 7rem); }
.cstat { border-top: 1px solid var(--line); padding-top: 1rem; }
.cstat__n { font-size: clamp(3rem, 6.4vw, 7rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; font-feature-settings: "tnum"; }
.cstat__n--txt { font-size: clamp(2.4rem, 4.6vw, 5rem); }
.cstat__l { margin-top: .6rem; font-size: .875rem; color: var(--muted); max-width: 22em; }
.cnote { margin-top: 1.25rem; font-size: var(--fs-s); color: var(--muted); }
.cindex { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(3rem, 6vw, 5rem); }
.cindex a {
  display: inline-flex; align-items: baseline; gap: .6em; padding: .7em 1em;
  border: 1px solid var(--line); border-radius: var(--r); font-size: .9375rem; font-weight: 500;
  transition: background-color .3s, color .3s, border-color .3s;
}
.cindex a span { font-size: .75rem; color: var(--muted); font-feature-settings: "tnum"; }
.cindex a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cindex a:hover span { color: var(--accent); }

/* ---------- Capítulos ---------- */
.cchap { border-top: 1px solid var(--line); }
.cchap__head { align-items: end; row-gap: 1rem; }
.cchap__n { grid-column: 1 / 3; align-self: start; font-size: var(--fs-s); font-feature-settings: "tnum"; padding-top: .8em; }
.cchap__title { grid-column: 3 / 10; font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.055em; line-height: .9; }
.cchap__kicker { grid-column: 10 / 13; color: var(--muted); padding-bottom: .5em; }
.cchap__body { margin-top: clamp(2rem, 4vw, 3.5rem); row-gap: 2rem; align-items: start; }
.cchap__text { grid-column: 3 / 8; display: grid; gap: 1em; color: var(--muted); }
.cchap__lead { color: var(--fg); font-size: var(--fs-m); line-height: 1.25; letter-spacing: -.015em; }
.cchap__facts { grid-column: 9 / 13; display: grid; gap: 1.25rem; }
.cchap__facts div { border-top: 1px solid var(--line); padding-top: .75rem; }
.cchap__facts dt { font-size: var(--fs-s); color: var(--muted); margin-bottom: .35rem; }
.cchap__facts dd { margin: 0; font-size: .9375rem; line-height: 1.45; }

/* Sitio completo */
.csite { margin-top: clamp(3.5rem, 7vw, 6rem); }
.csite__slide { padding-right: 16%; }
.csite__slide .web__mob { width: 19%; top: 12%; }
.csite__cap { margin-top: 1rem; }

/* Redacción web: tres decisiones */
.cpoints { margin-top: clamp(4rem, 8vw, 7rem); row-gap: var(--gap); }
.cpoints__label { grid-column: 1 / 13; margin-bottom: .5rem; }
.cpoint { grid-column: span 4; background: var(--surface); border-radius: var(--r); padding: clamp(1.25rem, 2.2vw, 2rem); display: flex; flex-direction: column; gap: .75rem; min-height: clamp(220px, 22vw, 320px); transition: background-color .5s var(--ease); }
.cpoint__n { font-weight: 600; font-size: var(--fs-s); }
.cpoint h3 { margin-top: auto; font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.cpoint p { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.cpoint:hover { background: var(--accent); }
.cpoint:hover p { color: var(--ink); }

/* Casos de éxito */
.cstories { margin-top: clamp(4rem, 8vw, 7rem); row-gap: 2rem; align-items: center; }
.cstories__text { grid-column: 1 / 7; display: grid; gap: 1em; color: var(--muted); }
.cstories__title { color: var(--fg); font-size: var(--fs-l); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.cstories__role strong { color: var(--fg); font-weight: 500; }
.cflow { grid-column: 8 / 13; display: grid; }
.cflow li {
  display: flex; align-items: baseline; gap: 1rem; border-top: 1px solid var(--line);
  padding-block: .55em; font-size: clamp(1.4rem, 2.6vw, 2.5rem); font-weight: 500; letter-spacing: -.035em;
}
.cflow li:last-child { border-bottom: 1px solid var(--line); }
.cflow li span { font-size: .75rem; color: var(--muted); letter-spacing: 0; font-feature-settings: "tnum"; min-width: 1.6rem; }
.cflow li:nth-child(2) { padding-left: 8%; }
.cflow li:nth-child(3) { padding-left: 16%; }
.cflow li:nth-child(4) { padding-left: 24%; }

/* PedidosYa + Wibond */
.cpya { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; margin-top: clamp(4rem, 8vw, 7rem); align-items: start; }
.cpya__media { grid-column: 1 / 7; aspect-ratio: 1200 / 627; padding: 0; display: block; width: 100%; }
.cpya__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cpya__media:hover img { transform: scale(1.03); }
.cpya__body { grid-column: 8 / 13; display: grid; gap: 1rem; }
.cpya__title { font-size: var(--fs-l); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.cpya__intro { color: var(--muted); }
.cpya__steps { display: grid; gap: 1rem; margin-top: .5rem; }
.cpya__steps div { border-top: 1px solid var(--line); padding-top: .7rem; }
.cpya__steps dt { font-size: var(--fs-s); font-weight: 600; margin-bottom: .25rem; }
.cpya__steps dd { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.45; }

/* ---------- Galerías ---------- */
.cgal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(3.5rem, 7vw, 6rem); }
.cgal__item { display: block; padding: 0; width: 100%; }
.cgal__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cgal__item:hover img { transform: scale(1.03); }
/* LinkedIn: horizontal grande + vertical; abajo dos horizontales */
.cgal--li .cgal__item--wide { grid-column: 1 / 9; aspect-ratio: 2000 / 1041; }
.cgal--li .cgal__item--tall { grid-column: 9 / 13; grid-row: span 2; aspect-ratio: 1080 / 1350; align-self: start; }
.cgal--li .cgal__item:not(.cgal__item--wide):not(.cgal__item--tall) { grid-column: span 4; aspect-ratio: 1200 / 627; }
/* Campañas: vía pública a lo ancho, debajo dos cuadradas */
.cgal--brand .cgal__item--hero { grid-column: 1 / 13; aspect-ratio: 2000 / 1333; max-height: 92svh; }
.cgal--brand .cgal__item--sq { grid-column: span 6; aspect-ratio: 1 / 1; }

/* ---------- Videos (capítulo oscuro) ---------- */
.cvids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(3.5rem, 7vw, 6rem); }
.cvid { display: block; padding: 0; text-align: left; width: 100%; }
.cvid--main { grid-column: 1 / -1; }
.cvid__media { display: block; aspect-ratio: 16 / 9; }
.cvid__media video { transition: transform 1.2s var(--ease); }
.cvid:hover .cvid__media video { transform: scale(1.02); }
.cvid__cap { display: flex; flex-direction: column; gap: .3rem; margin-top: .9rem; font-size: var(--fs-m); font-weight: 500; letter-spacing: -.02em; }
.cvid__cap .label { letter-spacing: 0; font-weight: 400; }

/* ---------- Enfoque ---------- */
.capproach__label { grid-column: 1 / 3; padding-top: .6em; }
.capproach__title { grid-column: 3 / 12; }
.capproach__tags { grid-column: 3 / 12; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Visor ---------- */
.lb {
  position: fixed; inset: 0; z-index: 80; background: rgba(20, 6, 20, .96); color: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto; padding: 16px var(--gutter) 20px;
  opacity: 0; transition: opacity .25s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-on { opacity: 1; }
body.lb-open { overflow: hidden; }
body.lb-open .cursor { display: none; }
.lb__top { display: flex; justify-content: space-between; align-items: center; }
.lb__top .label { color: rgba(236, 236, 232, .6); }
.lb__close { font-size: .875rem; font-weight: 500; padding: .6em .9em; border: 1px solid rgba(236, 236, 232, .25); border-radius: var(--r); transition: background-color .3s, color .3s; }
.lb__close:hover { background: var(--paper); color: var(--ink); }
.lb__stage { display: grid; place-items: center; min-height: 0; padding: 16px clamp(0px, 5vw, 80px); }
.lb__media { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 2px; background: #000; }
video.lb__media { width: min(100%, 1600px); }
.lb__cap { text-align: center; font-size: .9375rem; color: rgba(236, 236, 232, .8); }
.lb__nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(236, 236, 232, .25); border-radius: var(--r); font-size: 18px; color: var(--paper);
  background: rgba(20, 6, 20, .5); transition: background-color .3s, color .3s;
}
.lb__nav:hover { background: var(--accent); color: var(--ink); }
.lb__nav--prev { left: var(--gutter); }
.lb__nav--next { right: var(--gutter); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1199px) {
  .ch__title { grid-column: 1 / 13; }
  .ch__lead { grid-column: 1 / 9; }
  .ch__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .csum__copy { grid-column: 3 / 13; }
  .cstats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .cchap__title { grid-column: 3 / 13; }
  .cchap__kicker { grid-column: 3 / 13; }
  .cchap__text { grid-column: 1 / 8; }
  .cpoint { grid-column: span 12; min-height: 0; }
  .cpoint h3 { margin-top: .5rem; }
  .cstories__text, .cflow { grid-column: 1 / 13; }
  .cpya__media, .cpya__body { grid-column: 1 / 13; }
  .capproach__title, .capproach__tags { grid-column: 1 / 13; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
  .ch { padding-top: calc(56px + 2rem); }
  .ch__back { margin-bottom: 2rem; }
  .ch__title { font-size: clamp(4rem, 25vw, 7rem); }
  .ch__meta { grid-template-columns: 1fr 1fr; }
  .cfilm__media { aspect-ratio: 4 / 5; max-height: none; }
  .cfilm__tag { top: 12px; font-size: 11px; }
  .cstats { grid-template-columns: 1fr 1fr; }
  .cstat__n { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .cstat__n--txt { font-size: clamp(2rem, 10vw, 3rem); }
  .cchap__n { padding-top: 0; }
  .cchap__title { font-size: clamp(2.6rem, 13vw, 4.5rem); }
  .cchap__facts { grid-column: 1 / -1 !important; }
  .csite__slide { padding-right: 18%; }
  .csite__slide .web__mob { width: 24%; top: 30px; }
  .cflow li:nth-child(n) { padding-left: 0; }
  .cpya { grid-template-columns: 1fr; }
  .cpya > * { grid-column: 1 / -1 !important; }
  .cgal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cgal .cgal__item:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .cgal--li .cgal__item:nth-child(3), .cgal--li .cgal__item:nth-child(4),
  .cgal--brand .cgal__item--sq { grid-column: span 1 !important; }
  .cgal--li .cgal__item:nth-child(3), .cgal--li .cgal__item:nth-child(4) { aspect-ratio: 1 / 1; }
  .cvids { grid-template-columns: 1fr; }
  .lb { padding: 12px 12px 16px; }
  .lb__stage { padding: 12px 0; }
  .lb__nav { top: auto; bottom: 14px; translate: none; width: 44px; height: 44px; }
  .lb__cap { padding-inline: 56px; font-size: .8125rem; }
}

/* Capítulo oscuro con fondo propio (no depende del cambio de tema por scroll) */
.cchap--dark {
  background: var(--ink); color: var(--paper); border-top: 0;
  --fg: var(--paper); --muted: rgba(236, 236, 232, .58); --line: rgba(236, 236, 232, .18);
}

/* =========================================================
   Rebranding — sistema de marca de Wibond (valores del manual 2025)
   Tipografía y colores propios del cliente, solo dentro de .bsys
   ========================================================= */
.bsys {
  --wb-electric: #0444FF; --wb-midnight: #001E60; --wb-sky: #60CDFF; --wb-grey: #F2F2F2;
  --wb-font: "Poppins", "Inter Tight", Arial, sans-serif;
  display: grid; gap: var(--gap); margin-top: clamp(3.5rem, 7vw, 6rem);
}
.bsys__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.bsys__block { background: var(--surface); border-radius: var(--r); padding: clamp(1.25rem, 2.4vw, 2.25rem); }
.bsys__label { margin-bottom: 1.25rem; font-family: var(--font); font-weight: 400; }

/* Paleta */
.bpal { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr 1.2fr; gap: 6px; }
.bpal__sw {
  min-height: clamp(160px, 18vw, 260px); border-radius: var(--r); padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--wb-font); color: #fff;
}
.bpal__name { font-weight: 600; font-size: clamp(.95rem, 1.2vw, 1.15rem); letter-spacing: -.01em; }
.bpal__code { font-size: .75rem; line-height: 1.45; opacity: .85; font-feature-settings: "tnum"; }
.bpal__sw--electric { background: var(--wb-electric); }
.bpal__sw--midnight { background: var(--wb-midnight); }
.bpal__sw--sky { background: var(--wb-sky); color: var(--wb-midnight); }
.bpal__sw--grey { background: var(--wb-grey); color: var(--wb-midnight); box-shadow: inset 0 0 0 1px rgba(0, 30, 96, .08); }
.bpal__sw--grad { background: linear-gradient(135deg, var(--wb-electric), var(--wb-sky)); }

/* Tipografía */
.btype { font-family: var(--wb-font); color: var(--wb-midnight); display: flex; flex-direction: column; }
.btype__aa { font-size: clamp(6rem, 13vw, 12rem); font-weight: 600; line-height: .9; letter-spacing: -.03em; color: var(--wb-electric); }
.btype__weights { margin-top: auto; padding-top: 1.5rem; display: grid; }
.btype__weights li { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(0, 30, 96, .12); padding-block: .6rem; font-size: clamp(.95rem, 1.3vw, 1.2rem); }
.btype__w600 { font-weight: 600; } .btype__w500 { font-weight: 500; } .btype__w400 { font-weight: 400; }
.bhier { font-family: var(--wb-font); color: var(--wb-midnight); display: flex; flex-direction: column; align-items: flex-start; }
.bhier__tag { font-family: var(--font); font-size: .75rem; color: var(--muted); margin-top: 1rem; margin-bottom: .2rem; }
.bhier__tag:first-of-type { margin-top: 0; }
.bhier__h { font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.bhier__s { font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--wb-electric); line-height: 1.1; }
.bhier__b { font-weight: 400; font-size: .9375rem; line-height: 1.55; max-width: 42ch; }
.bhier__btn { display: inline-block; font-weight: 500; font-size: .9375rem; background: var(--wb-electric); color: #fff; padding: .7em 1.3em; border-radius: 999px; }

/* Highlights */
.bhl { display: grid; gap: 6px; align-content: start; }
.bhl__a, .bhl__b { font-family: var(--wb-font); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--r); }
.bhl em { font-style: normal; }
.bhl__a { background: #fff; color: var(--wb-midnight); }
.bhl__a em { color: var(--wb-electric); }
.bhl__b { background: var(--wb-midnight); color: #fff; }
.bhl__b em { color: var(--wb-sky); }

/* Productos */
.bprod { display: grid; gap: 1.1rem; align-content: start; }
.bprod__fam { display: grid; gap: .55rem; }
.bprod__t { font-family: var(--wb-font); font-weight: 600; color: var(--wb-midnight); font-size: 1.05rem; }
.bprod ul { display: flex; flex-wrap: wrap; gap: 6px; }
.bprod li { font-family: var(--wb-font); font-weight: 500; font-size: .8125rem; color: var(--wb-electric); background: #fff; border: 1px solid rgba(4, 68, 255, .25); padding: .5em 1em; border-radius: 999px; }
.bprod__fam:nth-child(3) li { background: var(--wb-electric); color: #fff; border-color: var(--wb-electric); }
.bprod__fam:nth-child(4) li { background: var(--wb-midnight); color: #fff; border-color: var(--wb-midnight); }

.bsys__photo { max-width: 60ch; color: var(--muted); margin-top: .5rem; }
.bsys__photo .label { margin-right: .4em; }
.bapps__label { margin-top: clamp(3.5rem, 7vw, 6rem); }
.bapps__label + .cgal { margin-top: 1rem; }

@media (max-width: 1199px) {
  .bpal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bsys__row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bpal { grid-template-columns: 1fr 1fr; }
  .bpal__sw { min-height: 120px; }
  .bpal__sw--grad { grid-column: 1 / -1; min-height: 80px; }
  .btype__aa { font-size: 6.5rem; }
}

/* =========================================================
   Gamba — galería por columnas y paleta de 6 colores
   ========================================================= */
.gsys__pal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gsys__pal .bpal__sw { font-family: var(--font); }
.cgal--g .cgal__item { aspect-ratio: 16 / 10; }
.cgal--g .g-12 { grid-column: span 12; aspect-ratio: 16 / 8; max-height: 92svh; }
.cgal--g .g-7 { grid-column: span 7; }
.cgal--g .g-6 { grid-column: span 6; }
.cgal--g .g-5 { grid-column: span 5; aspect-ratio: auto; }
.cgal--g .g-4 { grid-column: span 4; }
.cgal--g .g-tall { aspect-ratio: 3 / 4; }
.cgal--g .g-w { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cgal--g .g-l { background: #efece3; }
.cgal__item img.g-contain { object-fit: contain; padding: 4%; }
.g-ph { margin: 0; }
.g-ph .ph-tag { overflow-wrap: anywhere; right: 12px; }

/* Siguiente caso */
.cnext { border-top: 1px solid var(--line); }
.cnext__link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; padding-block: clamp(2.5rem, 6vw, 5rem); }
.cnext__name { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.055em; line-height: .9; transition: transform .8s var(--ease); }
.cnext__link:hover .cnext__name { transform: translateX(1%); }

@media (max-width: 1199px) {
  .gsys__pal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .gsys__pal { grid-template-columns: 1fr 1fr; }
  .cgal--g .cgal__item.g-tall:nth-child(n) { grid-column: span 1; }
  .cgal--g .cgal__item.g-tall + .g-tall + .g-tall { grid-column: 1 / -1; }
  .cgal--g .g-12, .cgal--g .g-5 { aspect-ratio: 16 / 10; }
}