/* Casos de éxito de 8layer-latam.com (/casos/{slug}.html), servidos por la app.
   Oscuro por defecto, como el resto del sitio; el claro aplica si el visitante lo elige.
   Los colores van como variables aquí arriba. */

:root {
  --cs-title: #0C0E1A;
  --cs-text: #2B3245;
  --cs-lead: #3F475C;
  --cs-muted: #5F6880;
  --cs-eyebrow: #40629D;
  --cs-link: #2F5BA8;
  --cs-line: #DCE2EE;
  --cs-card-bg: #FFFFFF;
  --cs-card-border: #DCE2EE;
  --cs-card-hover: rgba(64, 98, 157, .5);
  --cs-metric: #2F5BB7;
  --cs-mark-bg: rgba(91, 140, 224, .12);
  --cs-mark-border: rgba(64, 98, 157, .3);
  --cs-mark-text: #2F5BA8;
  --cs-quote-bg: linear-gradient(135deg, rgba(91, 140, 224, .14), #FFFFFF);
  --cs-quote-border: rgba(64, 98, 157, .25);
  --cs-glow: radial-gradient(80% 120% at 15% 0%, rgba(91, 140, 224, .16), transparent 60%);
  --cs-btn-line: #C5CEDF;
  --cs-btn-text: #1F2638;
  --cs-logo-filter: invert(1) brightness(.25);
  --cs-gutter: clamp(16px, 3.5vw, 48px);
}

:root[data-theme="dark"] {
  --cs-title: #FFFFFF;
  --cs-text: #AEB7CC;
  --cs-lead: #AEB7CC;
  --cs-muted: #8F99B2;
  --cs-eyebrow: #7E9CD4;
  --cs-link: #9FC4FF;
  --cs-line: rgba(255, 255, 255, .1);
  --cs-card-bg: linear-gradient(180deg, #0E1122, #0A0C18);
  --cs-card-border: rgba(255, 255, 255, .12);
  --cs-card-hover: rgba(159, 196, 255, .5);
  --cs-metric: #B4D2FF;
  --cs-mark-bg: rgba(126, 156, 212, .14);
  --cs-mark-border: rgba(126, 156, 212, .3);
  --cs-mark-text: #B4D2FF;
  --cs-quote-bg: linear-gradient(135deg, rgba(91, 140, 224, .16), rgba(12, 14, 26, .6));
  --cs-quote-border: rgba(255, 255, 255, .1);
  --cs-glow: radial-gradient(80% 120% at 15% 0%, rgba(60, 100, 190, .22), transparent 60%);
  --cs-btn-line: rgba(255, 255, 255, .18);
  --cs-btn-text: #DDE4F2;
  --cs-logo-filter: none;
}

.cs { color: var(--cs-text); }
.cs-ancho { max-width: 1400px; margin: 0 auto; padding: 0 var(--cs-gutter); box-sizing: border-box; }
.cs-medio { max-width: 1100px; margin: 0 auto; padding: 0 var(--cs-gutter); box-sizing: border-box; }
.cs-ceja { margin: 0; font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--cs-eyebrow); }

.cs-vista-previa {
  position: sticky; top: 0; z-index: 30; padding: 10px var(--cs-gutter); text-align: center;
  background: #5B8CE0; color: #061024; font-size: 14px; font-weight: 600;
}

/* Cabecera: título, bajada, botones y ficha del cliente. */
.cs-hero { padding: clamp(48px, 9vh, 104px) 0 clamp(36px, 6vh, 64px); background: var(--cs-glow); }
.cs-hero__in { display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 80px); align-items: flex-start; }
.cs-hero__texto { flex: 1.6 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-ruta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--cs-muted); }
.cs-ruta a { color: var(--cs-link); text-decoration: none; }
.cs-ruta a:hover { text-decoration: underline; }
.cs-ruta [aria-current] { color: var(--cs-muted); }
.cs h1 { margin: 0; max-width: 18ch; font-family: var(--font-head); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -.045em; color: var(--cs-title); text-wrap: balance; }
.cs-hero__bajada { margin: 0; max-width: 58ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--cs-lead); }
.cs-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.cs-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background .2s, border-color .2s, color .2s;
}
.cs-btn--acento { background: #5B8CE0; color: #FFFFFF; }
.cs-btn--acento:hover { background: #4A7BD0; }
.cs-btn--contorno { border: 1px solid var(--cs-btn-line); color: var(--cs-btn-text); }
.cs-btn--contorno:hover { border-color: var(--cs-card-hover); }
.cs-btn:focus-visible { outline: 2px solid #9FC4FF; outline-offset: 3px; }

.cs-ficha { flex: 1 1 300px; min-width: 0; padding: 6px 26px 12px; border-radius: 18px; border: 1px solid var(--cs-card-border); background: var(--cs-card-bg); box-sizing: border-box; }
.cs-ficha__marca { display: flex; align-items: center; min-height: 64px; padding: 16px 0 8px; }
.cs-logo { height: 40px; width: auto; max-width: 200px; filter: var(--cs-logo-filter); }
.cs-placa { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; background: #FFFFFF; border: 1px solid #DCE2EE; }
.cs-placa img { height: 36px; width: auto; max-width: 180px; }
/* Logo claro con fondo transparente: placa oscura en ambos temas. Casi cuadrado: más alto. */
.cs-placa--oscura { background: #0C0E1A; border-color: rgba(255, 255, 255, .14); }
.cs-placa--alta { padding: 8px; }
.cs-placa--alta img { height: 96px; max-width: 150px; }
.cs-iniciales {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px;
  background: var(--cs-mark-bg); border: 1px solid var(--cs-mark-border); font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--cs-mark-text);
}
.cs-ficha dl { margin: 0; }
.cs-ficha dl > div { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--cs-line); }
.cs-ficha dl > div:last-child { border-bottom: 0; }
.cs-ficha dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cs-eyebrow); }
.cs-ficha dd { margin: 0; font-size: 15px; color: var(--cs-title); }
.cs-ficha dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--cs-line); text-underline-offset: 3px; }
.cs-ficha dd a:hover { text-decoration-color: currentColor; }

/* Banda de resultados. */
.cs-cifras { padding: 0 0 clamp(8px, 2vh, 20px); }
.cs-cifras__lista {
  list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.cs-cifras__lista li {
  display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border-left: 1px solid var(--cs-line);
  border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line);
}
.cs-cifras__lista li:last-child { border-right: 1px solid var(--cs-line); }
.cs-cifras__lista strong { font-family: var(--font-head); font-weight: 600; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -.04em; color: var(--cs-metric); }
.cs-cifras__lista span { max-width: 24ch; font-size: 14.5px; line-height: 1.45; color: var(--cs-muted); }

/* Desafío y solución. */
.cs-relato { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(30px, 5vw, 70px); padding-top: clamp(56px, 9vh, 100px); padding-bottom: clamp(56px, 9vh, 100px); }
.cs-relato section { display: flex; flex-direction: column; gap: 22px; padding-top: 26px; border-top: 1px solid var(--cs-line); }
.cs-seccion {
  margin: 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.04em; color: var(--cs-title); text-wrap: balance;
}
.cs-seccion__num {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-weight: 400; font-size: 12px;
  letter-spacing: .22em; line-height: 1; color: var(--cs-eyebrow);
}
.cs-seccion__num::after { content: ""; width: 36px; height: 2px; background: currentColor; }
.cs-texto { font-size: 17px; line-height: 1.7; color: var(--cs-text); }
.cs-texto p { margin: 0 0 16px; }
.cs-texto ul { margin: 0 0 16px; padding-left: 22px; }
.cs-texto li { margin-bottom: 6px; }
.cs-texto li::marker { color: var(--cs-eyebrow); }
.cs-texto strong { color: var(--cs-title); font-weight: 600; }
.cs-texto a { color: var(--cs-link); text-underline-offset: 3px; }
.cs-texto > :last-child { margin-bottom: 0; }
/* Alineación por párrafo (marcas [centro] / [derecha] / [justificado] del editor). El justificado parte
   palabras con guion (lang es-CL) para no abrir huecos grandes en columnas angostas. */
.cs-texto .al-centro { text-align: center; }
.cs-texto .al-derecha { text-align: right; }
.cs-texto .al-justificado { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.cs-texto ul.al-centro, .cs-texto ul.al-derecha { list-style-position: inside; padding-left: 0; }

/* Cita y video. */
.cs-testimonio {
  margin: 0 0 clamp(56px, 9vh, 100px); padding: clamp(28px, 4vw, 56px); border-radius: 22px; border: 1px solid var(--cs-quote-border);
  background: var(--cs-quote-bg); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center;
}
.cs-testimonio--solo { grid-template-columns: 1fr; }
.cs-testimonio__cita { display: flex; flex-direction: column; gap: 20px; }
.cs-testimonio blockquote { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -.03em; color: var(--cs-title); }
.cs-testimonio figcaption { font-size: 14.5px; color: var(--cs-muted); }
.cs-testimonio figcaption strong { color: var(--cs-title); font-weight: 500; }
.cs-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--cs-card-border); background: #0C0E1A; }
.cs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Otros casos. */
.cs-otros { padding-top: clamp(40px, 6vh, 70px); padding-bottom: clamp(56px, 9vh, 100px); border-top: 1px solid var(--cs-line); }
.cs-otros h2 { margin: 0 0 24px; font-family: var(--font-head); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; color: var(--cs-title); }
.cs-otros ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cs-otros a {
  display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: 24px; border-radius: 16px;
  border: 1px solid var(--cs-card-border); background: var(--cs-card-bg); color: inherit; text-decoration: none; transition: border-color .25s, transform .25s;
}
.cs-otros a:hover { border-color: var(--cs-card-hover); transform: translateY(-2px); }
.cs-otros strong { font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; color: var(--cs-title); }
.cs-otros__cifra { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: 24px; color: var(--cs-metric); }
.cs-otros__cifra span { font-family: var(--font-sans); font-weight: 400; font-size: 13.5px; color: var(--cs-muted); }

/* Cierre. */
.cs-cierre { padding: clamp(56px, 9vh, 100px) 0; border-top: 1px solid var(--cs-line); }
.cs-cierre__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cs-cierre h2 { margin: 0; max-width: 22ch; font-family: var(--font-head); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -.035em; color: var(--cs-title); }

@media (max-width: 640px) {
  .cs-cifras__lista li { border-right: 1px solid var(--cs-line); border-bottom: 0; }
  .cs-cifras__lista li:last-child { border-bottom: 1px solid var(--cs-line); }
  .cs-texto { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-otros a, .cs-btn { transition: none; }
  .cs-otros a:hover { transform: none; }
}