/* ══════════════════════════════════════
   CASO DE ESTUDIO (daewoo.html)
   Usa los tokens y componentes de styles.css; el rojo de la marca
   aparece solo como acento (numeros, cifras, destacados).
   ══════════════════════════════════════ */
.caso {
  --rojo: #E10E19;
  --crema: #F1F0EA;
  --caso-w: 1080px;
}

.caso main > section {
  max-width: var(--caso-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  box-sizing: content-box;
}

/* -- 00 · portada -- */
.c-portada { padding-top: clamp(1rem, 3vw, 2.5rem); }
.c-volver {
  display: inline-flex;
  gap: .4em;
  font-size: .85rem;
  font-weight: 300;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .25em;
  transition: text-decoration-color .2s ease;
}
.c-volver:hover { text-decoration-color: currentColor; }
.c-kicker {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(.8rem, .95vw, .95rem);
  font-weight: 300;
}
.c-titulo {
  font-size: clamp(4rem, 15vw, 13rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.06em;
}
.c-titulo::after { content: "."; color: var(--rojo); }
.c-bajada {
  max-width: 30em;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.c-bajada strong { font-weight: 600; }

.c-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.c-meta div { padding-top: .6rem; border-top: 1px solid var(--ink); }
.c-meta dt { font-size: .8rem; font-weight: 500; }
.c-meta dd { margin-top: .3rem; font-size: .9rem; font-weight: 300; line-height: 1.35; }

/* Fotos como stickers: girados, encimados y con un marco blanco finito.
   Al entrar en pantalla se "pegan" de a uno (clase is-on, caso.js) */
.c-stickers {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.5rem 3% 2rem;
}
.sticker {
  margin: -6% -9%;              /* se encima con las vecinas */
  padding: 2px;                 /* marco finito */
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transform: translateY(var(--y)) rotate(var(--r));
  transition: transform .25s ease, box-shadow .25s ease;
}
.sticker img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
/* Feed: 28 piezas en 4 filas de 7, con un poco menos de solapamiento */
.c-stickers--feed {
  grid-template-columns: repeat(7, 1fr);
  max-width: 760px;              /* mas chicas: disimulan la resolucion de origen */
  margin-inline: auto;
  padding-inline: 4%;
  margin-top: .5rem;
}
.c-stickers--feed .sticker { margin: -5% -7%; }
.sticker:hover {
  z-index: 2;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  transform: translateY(calc(var(--y) - 6px)) rotate(0deg) scale(1.06);
}
/* antes de entrar en pantalla: invisibles; despues se pegan en secuencia */
.c-stickers.is-ready .sticker { opacity: 0; }
.c-stickers.is-on .sticker {
  animation: pegar .45s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes pegar {
  from {
    opacity: 0;
    transform: translateY(calc(var(--y) - 24px)) rotate(calc(var(--r) * 2.5)) scale(1.25);
    box-shadow: 0 22px 40px rgba(0, 0, 0, .25);
  }
  to {
    opacity: 1;
    transform: translateY(var(--y)) rotate(var(--r)) scale(1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  }
}

/* -- capitulos -- */
.c-cap { padding-top: clamp(4rem, 9vw, 7rem); }
.c-cap__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--ink);
}
.c-num {
  color: var(--rojo);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.c-cap__titulo {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -.02em;
}

/* frase de apertura de cada capitulo */
.c-frase {
  max-width: 14em;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(2.2rem, 6.2vw, 5.4rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.05em;
}
.c-frase--chica { max-width: 18em; font-size: clamp(1.8rem, 4.4vw, 3.8rem); }
.c-frase em,
.c-voz__si em { font-style: normal; color: var(--rojo); }

.c-texto {
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  font-weight: 300;
  line-height: 1.45;
}
.c-texto strong { font-weight: 600; }

/* Logo solo, en rojo sobre el blanco de la pagina */
.c-logo-panel {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding-inline: clamp(0rem, 4vw, 3rem);
}
.c-logo-panel img { display: block; width: 100%; height: auto; }


.c-cero {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: end;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.c-cero__label { font-size: .85rem; font-weight: 300; }
.c-cero__datos { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 6vw, 5rem); }
.c-cero__datos p {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  font-weight: 300;
}
.c-cero__num {
  color: var(--rojo);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.06em;
}

/* -- 02 · la idea -- */
.c-voz { margin-top: clamp(1.5rem, 4vw, 3rem); }
.c-voz span {
  display: block;
  margin-bottom: .4rem;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;   /* no hereda el interletrado apretado del titular */
}
.c-voz__no {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 300;
  color: #848484;
}
.c-voz__no s { text-decoration-thickness: 1px; }
.c-voz__si {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(2.2rem, 6.2vw, 5.4rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.05em;
}

.c-tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.c-tres > div { padding-top: .6rem; border-top: 1px solid var(--ink); }
.c-tres h3 { font-size: .85rem; font-weight: 500; }
.c-tres p {
  margin-top: .6rem;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.45;
}
.c-tres strong { font-weight: 600; }
.c-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.c-pills li {
  padding: .3em .85em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 300;
}

/* -- 03 · el sistema en accion: cada punto de contacto = etiqueta + piezas -- */
.c-punto { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.c-punto__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
  font-size: clamp(.85rem, 1vw, .95rem);
  font-weight: 300;
}
.c-punto__label span {
  color: var(--rojo);
  font-weight: 600;
}
.c-media { margin: 0; }
.c-media img { display: block; width: 100%; height: auto; }
.c-cajas { max-width: none; margin-top: 0; }
.c-reels { max-width: none; margin-top: clamp(.6rem, 1.2vw, 1rem); }

/* Web: marco de navegador con los banners rotando (caso.js) */
.c-web {
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
}
.c-web__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .55rem .8rem;
  background: #f1f1f1;
  border-bottom: 1px solid #e2e2e2;
}
.c-web__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d4; }
.c-web__bar span {
  flex: 1;
  max-width: 22rem;
  margin-left: .8rem;
  padding: .2rem .8rem;
  border-radius: 999px;
  background: var(--paper);
  color: #848484;
  font-size: .75rem;
}
.c-web__stage {
  position: relative;
  aspect-ratio: 1800 / 808;
  background: #f5f5f5;
}
.c-web__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s ease;
}
.c-web__slide.is-active { opacity: 1; }
.c-web__dots { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; }
.c-web__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}
.c-web__dot.is-active { width: 22px; border-radius: 999px; background: var(--rojo); border-color: var(--rojo); }

/* -- 04 · el resultado -- */
.c-resultado {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.c-resultado__dato { display: flex; flex-direction: column; }
.c-resultado__antes { font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 300; }
.c-resultado__num {
  color: var(--rojo);
  font-size: clamp(4rem, 11vw, 9.5rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.06em;
}
.c-resultado__que {
  max-width: 20em;
  margin-top: .6rem;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  font-weight: 300;
}
.c-resultado__perfil { margin: 0; }
.c-resultado__perfil img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.c-texto--lead { max-width: 34em; margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* -- cierre -- */
.c-cierre {
  padding-block: clamp(4rem, 9vw, 7rem) clamp(1rem, 2vw, 2rem);
  text-align: center;
}
.c-cierre__frase {
  font-size: clamp(1.8rem, 4.4vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
}
.c-cierre__frase em { font-style: normal; color: var(--rojo); }
.c-cierre__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.c-cierre__botones .pill { padding: .55em 1.4em; font-size: 1rem; }

/* -- celular -- */
@media (prefers-reduced-motion: reduce) {
  .c-stickers.is-on .sticker { animation: none; opacity: 1; }
}

@media (max-width: 720px) {
  .c-meta { grid-template-columns: 1fr 1fr; }
  .c-tres,
  .c-cero,
  .c-resultado { grid-template-columns: 1fr; }
  .c-web__bar span { display: none; }
  .c-stickers { grid-template-columns: repeat(4, 1fr); padding-inline: 5%; }
  .c-stickers--feed { grid-template-columns: repeat(5, 1fr); }
  .sticker { padding: 1.5px; }
  .sticker:nth-child(n + 13) { display: none; }       /* en celular, las primeras 12 */
  .c-stickers--feed .sticker:nth-child(n + 11) { display: none; }   /* y 10 del feed */
}