/* ============================================================
   page-caso-detalle.css — páginas de caso de éxito, con el Intiza
   design system. Última pantalla migrada.

   OJO: este archivo lo usan las 24 páginas de caso. Todas comparten el
   mismo esqueleto, pero no todas traen las mismas piezas:

   · Indicadores CON números (.indi, tres tarjetas: mejora / sin / con)
     en 14 casos, y CUALITATIVOS (.indi.quali, cuatro tarjetas con ícono)
     en los otros 10.
   · Video en 8 casos.
   · Testimonio en 23; de esos, 21 con foto de la persona.
   · Acento verde (.prov) en los 4 casos de Proveedores.
   · Servipet es una página recortada: una sección y sin ficha de datos.

   Cualquier cambio acá hay que mirarlo contra esas variantes, no solo
   contra el caso que se tenga abierto.

   Reglas del sistema, como en el resto del sitio: fondo claro, el azul
   oscuro para el encabezado y el footer, sombras tintadas en azul y
   nunca negras, títulos en peso 500, hairline var(--border-soft).
   ============================================================ */

:root { --accent: var(--c-cob); }

body:has(.ds-page) { background: var(--bg-soft); color: var(--fg-1); }

.ds-page { --acc-cob: var(--intiza-azul-claro); --acc-prov: var(--intiza-verde);
  --tint-oscuro: brightness(0); }

/* el contenido va más angosto que el resto del sitio: es una lectura larga */
.wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 0 36px; }
.wrap.wide { max-width: 1240px; }
/* La barra del menú es fija y de ancho completo (site.css), pero el .wrap de
   acá arriba tiene la misma especificidad y, al cargarse después, le ganaba:
   le pisaba position, ancho, padding y z-index. La barra quedaba en el flujo
   —empujando el hero 77px— y 22px más alta que en el resto del sitio. */
.wrap.topbar { position: fixed; top: 0; left: 0; right: 0; max-width: none; padding: 0; z-index: 60; }

/* ---- breadcrumb ---- */
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.72);
  text-decoration: none; margin: 0; transition: color var(--dur-base); }
.crumb:hover { color: #fff; }
.crumb svg { width: 15px; height: 15px; }

/* ============================================================
   ENCABEZADO — mismo degradé que el resto de las páginas.
   Los 132px de arriba despejan la barra fija de 76px.
   ============================================================ */
.herowrap { position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0526D0 0%, #1735C5 52%, #067AFB 100%); }
/* Foto institucional de la empresa del caso, cuando la hay. Cada página la pasa
   en --hero-foto desde su front matter; si no la define, la variable cae en
   'none' y queda el degradé de marca solo, sin que se rompa nada.
   Va en una capa propia enmascarada: entra desde la derecha y se desvanece
   antes de llegar al texto, así el título y las etiquetas siempre se leen. */
.herowrap::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hero-foto, none); background-size: cover; background-position: center right;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 80%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 80%);
  opacity: .5; }
.hero { position: relative; padding: 110px 0 36px; }
.ptag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: var(--fw-medium);
  padding: 6px 13px; border-radius: var(--radius-pill); color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.ptag + .ptag { margin-left: 8px; }
.hero h1 { font-size: 50px; font-weight: var(--fw-medium); letter-spacing: -.03em; line-height: 1.05;
  color: #fff; margin: 18px 0 0; }
.herohead { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 14px; }
.hlogo { width: 124px; height: 124px; border-radius: 26px; background: #fff; overflow: hidden;
  flex: 0 0 auto; box-shadow: 0 16px 36px rgba(3,20,120,.28); }

/* ============================================================
   INDICADORES — ya sobre el fondo claro.
   El azul corta justo despues del titulo: a partir de aca la pagina
   es clara, asi que las tarjetas van con la sombra azulada del sistema
   y no con la que usabamos sobre el degrade.
   ============================================================ */
.herobottom { position: relative; padding: 48px 0 0; }

/* ---- indicadores con números ---- */
.indi-title { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 16px; }
.indi { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; align-items: stretch; }
.ind { position: relative; padding: 24px 26px; border-radius: var(--radius-xl); display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: 0 20px 34px -16px rgba(5,38,208,.22), 0 3px 10px -4px rgba(5,38,208,.10); }
.ind .ik { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.ind .iv { font-size: 42px; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1; color: var(--fg-1); }
.ind .il { font-size: 13px; color: var(--fg-2); margin-top: 11px; line-height: var(--lh-snug); }
/* la tarjeta de mejora es el dato que resume el caso: va celeste y con la
   franja de acento arriba, el mismo recurso del resto del sistema */
.ind.mejora { background: var(--celeste-50); overflow: hidden; }
.ind.mejora::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--intiza-azul-oscuro), var(--accent)); }
.ind.mejora .ik { color: var(--accent); }
.ind.mejora .iv, .ind.despues .iv { color: var(--accent); }

/* ---- indicadores cualitativos (los otros 10 casos) ---- */
.indi.quali { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ind.q { flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 22px; }
.ind.q .qi { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex;
  align-items: center; justify-content: center;
  background: var(--celeste-60); border: 1px solid var(--border-soft); color: var(--accent); }
.ind.q .qi svg { width: 19px; height: 19px; }
.ind.q .qt { font-size: 14.5px; line-height: var(--lh-snug); color: var(--fg-2); }

/* ---- acento verde: los casos de Proveedores ---- */
.hero.prov, .bodyshell.prov { --accent: var(--c-prov); }
.herowrap.prov { background: linear-gradient(135deg, #0526D0 0%, #0C6FA8 56%, #02AEB9 100%); }
.bodyshell.prov .quote { background: rgba(2,174,185,.07); border-left-color: var(--c-prov); }

/* ============================================================
   CUERPO DEL ARTÍCULO — contenedor blanco sobre el fondo celeste
   ============================================================ */
.bodyshell { max-width: 900px; margin: 48px auto 0; padding: 20px 56px 48px;
  border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: 0 20px 34px -16px rgba(5,38,208,.22), 0 3px 10px -4px rgba(5,38,208,.10); }
.bodyshell .sec p { max-width: none; }
@media (max-width: 760px) { .bodyshell { padding: 16px 24px 32px; } }
.sec { padding: 56px 0 0; }
.sec h2 { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.sec h3 { font-size: 30px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight);
  color: var(--fg-1); margin: 0 0 20px; }
.sec p { font-size: 16.5px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0 0 16px; max-width: 68ch; }

/* ---- ficha de datos al costado de "Sobre la empresa" ---- */
.about { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.facts { display: flex; flex-direction: column; gap: 2px; padding: 26px 28px; border-radius: var(--radius-lg);
  background: var(--celeste-50); border: 1px solid var(--border-soft); }
.fact { padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.fact:last-child { border-bottom: 0; }
.fact .fv { font-size: 22px; font-weight: var(--fw-bold); color: var(--intiza-azul-oscuro); }
.fact .fl { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }

/* ---- testimonio: callout celeste con filo de color ---- */
.quote { margin: 56px 0 0; padding: 36px 40px; border-radius: var(--radius-lg); position: relative;
  background: var(--celeste-50); border: 1px solid var(--border-soft);
  border-left: 5px solid var(--accent); }
.quote .qm { font-size: 23px; line-height: 1.5; font-weight: var(--fw-regular); color: var(--fg-1);
  letter-spacing: -.01em; margin: 0; text-wrap: pretty; }
.quote .qby { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.quote .av { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: #fff;
  border: 1px solid var(--border-soft); flex: 0 0 auto; }
.quote .qn { font-size: 15px; font-weight: var(--fw-medium); color: var(--fg-1); }
.quote .qr { font-size: 13px; color: var(--fg-3); margin-top: 2px; }

/* ---- video ---- */
.video { margin: 56px 0 0; position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-3); aspect-ratio: 16 / 9; }
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.play span { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px rgba(3,20,120,.30); }
.play svg { width: 30px; height: 30px; margin-left: 4px; color: var(--intiza-azul-oscuro); }

@media (max-width: 760px) {
  .hero { padding: 96px 0 28px; }
  .hlogo { width: 84px; height: 84px; border-radius: 18px; }
  .herobottom { padding-top: 32px; }
  .hero h1 { font-size: 34px; }
  .indi { grid-template-columns: 1fr; }
  .indi.quali { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  /* el padding de escritorio dejaba la cita en una columna de ~165px a 375px */
  .quote { margin-top: 40px; padding: 24px 22px; border-radius: var(--radius-md); border-left-width: 4px; }
  .quote .qm { font-size: 18.5px; }
  .quote .qby { margin-top: 20px; }
}

/* ============================================================
   OTROS CASOS DE ÉXITO — sección compartida (site.css, .sx-casos)
   re-tematizada en claro sin tocar el archivo original.
   ============================================================ */
/* 96px y no 48: arriba termina el contenedor blanco del articulo y acá empieza
   otro contenedor, el del carrusel. Con 48 las dos tarjetas se pegaban. */
.ds-page .sx-casos .section { background: var(--bg-soft); padding: 96px 0; }
.ds-page .sx-casos .wrap { max-width: 1200px; }
.ds-page .sx-casos .shell { background: var(--surface-card); border: 1px solid var(--border);
  box-shadow: 0 20px 34px -16px rgba(5,38,208,.30), 0 3px 10px -4px rgba(5,38,208,.10); }
.ds-page .sx-casos .shell::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0;
  width: auto; height: 4px; transform: none; opacity: 1; z-index: 3;
  background: linear-gradient(90deg, var(--intiza-azul-oscuro), var(--accent)); }
.ds-page .sx-casos h2 { color: var(--fg-1); font-weight: var(--fw-medium); }
.ds-page .sx-casos h2 em { color: var(--intiza-azul-oscuro); }
.ds-page .sx-casos .tlogo img { filter: var(--tint-oscuro); opacity: .65; }
.ds-page .sx-casos .nav { background: var(--surface-card); border: 1px solid var(--border);
  color: var(--intiza-azul-oscuro); box-shadow: var(--shadow-3); }
.ds-page .sx-casos .nav:hover { background: var(--celeste-40); border-color: var(--border-strong); }
.ds-page .sx-casos .case { background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2); }
.ds-page .sx-casos .case:hover { border-color: var(--border); box-shadow: var(--shadow-3); }
.ds-page .sx-casos .ctag { background: var(--intiza-azul-oscuro); color: #fff; }
.ds-page .sx-casos .cbody h3 { color: var(--fg-1); font-weight: var(--fw-medium); }
.ds-page .sx-casos .cbody p { color: var(--fg-2); }
.ds-page .sx-casos .clink { color: var(--intiza-azul-oscuro); font-weight: var(--fw-medium); }
.ds-page .sx-casos .cover::after { background: linear-gradient(180deg, rgba(10,18,51,0) 55%, rgba(10,18,51,.28)); }
.ds-page .sx-casos .allcases { margin-top: 8px; }
.ds-page .sx-casos .btn { background: var(--intiza-azul-oscuro); color: #fff; font-weight: var(--fw-medium);
  box-shadow: 0 8px 22px rgba(5,38,208,.28); }
.ds-page .sx-casos .btn:hover { background: #0420B8; transform: none; box-shadow: 0 12px 28px rgba(5,38,208,.34); }
@media (max-width: 760px) { .ds-page .sx-casos .section { padding: 64px 0; } }

/* ============================================================
   FOOTER — se mantiene oscuro (el sistema lo prevé así), pero
   en el azul de marca y sin los acentos teal que no son del kit.
   ============================================================ */
body:has(.ds-page) .sitefooter { background: var(--fg-1); border-top: 0; margin-top: 0; }
body:has(.ds-page) .sitefooter::before { background: linear-gradient(90deg, transparent, var(--acc-cob), transparent); opacity: .55; }
body:has(.ds-page) .ft-col h4 { color: var(--intiza-celeste); font-weight: var(--fw-medium); }
body:has(.ds-page) .ft-cta { background: #fff; color: var(--intiza-azul-oscuro); font-weight: var(--fw-medium);
  box-shadow: 0 10px 26px rgba(5,38,208,.28); }
body:has(.ds-page) .ft-cta:hover { background: var(--intiza-celeste); transform: none; box-shadow: 0 14px 32px rgba(5,38,208,.34); }
body:has(.ds-page) .ft-socials a:hover { background: rgba(6,122,251,.22); }