/* ==========================================================================
   Thinkhub — /caso-camuzzi  (frame 273:9723)
   Página oscura de punta a punta, con una sección naranja destacada antes del
   cierre. Sirve de plantilla para los demás casos.

   Los tres frames del archivo son desktop 1440, tablet 800 y mobile 375. Los
   breakpoints de tokens.css (1100 / 640) son los que ya usa el resto del sitio.
   ========================================================================== */

.page-caso { background: var(--c-dark); color: var(--c-white); }

/* --- Hero -----------------------------------------------------------------
   Fondo oscuro plano con dos elipses gigantes encima, las dos centradas y
   desbordando el bloque por los costados:

   · Ellipse 118 (2823px, top 404) sube desde el pie. Es oscura, del mismo
     color que el fondo, y lleva un resplandor naranja difuminado alrededor
     que es lo que dibuja el halo sobre la curva.
   · Ellipse 117 (2300px, top -1930) baja desde arriba y va por encima. Trae
     el degradé naranja en capas y se apaga contra el fondo en su tramo alto,
     que es lo que oscurece el tope del hero.

   Las dos van como SVG exportado del frame: son degradés radiales apilados
   más un drop shadow difuminado, no se reproducen con background-image sin
   perder el resplandor. El orden del markup respeta el del archivo (primero
   la de abajo, después la de arriba, y el logo al final). */
.caso-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--caso-hero-h);
  background: var(--c-dark);
}

.caso-hero__glow {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* La caja del SVG es cuadrada e incluye el desborde del blur. */
  width: var(--glow-w);
  height: var(--glow-w);
  max-width: none;
  pointer-events: none;
}

.caso-hero__glow--bottom {
  --glow-w: var(--caso-glow-bottom-w);
  top: var(--caso-glow-bottom-y);
}

.caso-hero__glow--top {
  --glow-w: var(--caso-glow-top-w);
  top: var(--caso-glow-top-y);
}

/* El logo va por encima de las dos elipses, a la altura que trae el frame. */
.caso-hero__logo {
  position: absolute;
  top: var(--caso-logo-y);
  left: 50%;
  translate: -50% 0;
  width: var(--caso-logo-w);
  height: auto;
}

/* --- Ficha ----------------------------------------------------------------
   Cuatro columnas iguales (flex 1 en el archivo), no anchos fijos. */
.ficha { padding-bottom: var(--sp-100); }

.ficha__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-36);
  align-items: start;
}

/* En este caso el gap del campo es 36, no el 28 de la card de /exitos. */
.ficha .case-field { gap: var(--sp-36); }

/* El KPI de la ficha es Tittle/Desktop (72/56), no el Subheader de /exitos. */
.ficha .case-field__kpi strong {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
}

/* Solución: link subrayado + flecha con el gradiente de marca. */
.case-field__link {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-8, 8px);
  font-size: var(--fs-paragraph-m);
  line-height: var(--lh-paragraph-m);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: opacity var(--dur) var(--ease);
}

.case-field__link:hover { opacity: var(--hover-op); }

.case-field__link img {
  flex: none;
  width: var(--caso-arrow);
  height: var(--caso-arrow);
}

/* --- Titular -------------------------------------------------------------- */
.caso-lead { padding-block: var(--sp-100); }

.caso-lead__text {
  margin: 0;
  max-width: 823px;
  font-size: var(--fs-paragraph-l);
  line-height: var(--lh-paragraph-l);
  font-weight: var(--fw-regular);
}

/* --- Acerca de ------------------------------------------------------------ */
.acerca { padding-block: var(--sp-100); }

.acerca__grid {
  display: grid;
  grid-template-columns: 650px auto;
  gap: var(--sp-28);
  align-items: start;
  justify-content: space-between;
}

.acerca__body { display: flex; flex-direction: column; gap: var(--sp-72); }

.acerca__text {
  margin: 0;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
}

.acerca__stats { display: flex; gap: var(--sp-20); margin: 0; }

.acerca__stat { display: flex; flex-direction: column; gap: var(--sp-36); }

.acerca__stat dt { opacity: 0.5; }

.acerca__stat dd { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }

.acerca__stat strong {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
}

.acerca__stat span {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

/* --- Banda de imagen ------------------------------------------------------
   Sangra a ambos lados. La foto se recorta arriba y abajo (en el archivo la
   imagen mide 147.62% del alto del marco y sube un 23.93%). */
.caso-banda {
  height: var(--caso-banda-h);
  overflow: hidden;
}

.caso-banda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* --- El desafío ----------------------------------------------------------- */
.desafio { padding-block: var(--sp-100); }

.desafio__text {
  margin: var(--sp-72) 0 0;
  max-width: 994px;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
}

/* --- Retos (3 cards) ------------------------------------------------------ */
.retos { padding-block: var(--sp-100); }

.retos__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-20);
  align-items: stretch;
}

.reto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-36) var(--sp-24);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.05);
}

/* Los títulos de los retos van en salmón. */
.reto__title {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
  color: var(--c-border-hi);
}

.reto__text { display: flex; flex-direction: column; }

.reto__text p {
  margin: 0;
  font-size: var(--fs-reto);
  line-height: var(--lh-reto);
}

/* --- Cita -----------------------------------------------------------------
   El párrafo arranca a la izquierda y la cita se alinea a la derecha. */
.cita { padding-block: var(--sp-100); }

.cita__intro {
  margin: 0 0 var(--sp-56);
  max-width: 652px;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
}

.cita__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
  align-items: flex-start;
  max-width: 652px;
  margin-left: auto;
  color: var(--c-border);
}

.cita__quote {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

/* --- La solución ---------------------------------------------------------- */
/* --- Elipse entre la cita y La solución ------------------------------------
   Es la Ellipse 118 del hero otra vez, pero entrando desde arriba: el interior
   del círculo es #212224, igual que el fondo, así que sólo se ve el arco y el
   resplandor naranja que cae por debajo. El bloque sólo reserva el hueco que
   el frame deja entre las dos secciones. */
.caso-glow {
  position: relative;
  height: var(--caso-glow-sol-band);
  pointer-events: none;
}

/* La ventana por la que asoma la elipse. Hay que recortarla por dos motivos:
   el SVG entra entero, así que sin recorte el arco de arriba del círculo se
   vuelve a dibujar sobre la ficha —se ven dos elipses—, y si se corta justo en
   el borde de la franja el naranja de los costados queda con un filo recto.
   Por eso el tope va a la altura del centro del círculo: de ahí para arriba el
   relleno es #212224, el mismo del fondo, y el corte no se ve. Abajo se estira
   lo justo para que el halo se apague solo. Va detrás del texto. */
.caso-glow__clip {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: var(--caso-glow-sol-clip);
  bottom: calc(-1 * var(--caso-glow-sol-bleed));
  overflow: hidden;
}

/* La caja del SVG está centrada en el círculo, y el tope del recorte también,
   así que la mitad del ancho la deja en su lugar. */
.caso-glow__img {
  position: absolute;
  left: 50%;
  top: calc(var(--caso-glow-sol-w) / -2);
  translate: -50% 0;
  width: var(--caso-glow-sol-w);
  height: var(--caso-glow-sol-w);
  max-width: none;
}

.solucion { padding-block: var(--sp-100); }

.solucion__lead {
  margin: var(--sp-72) 0 0;
  max-width: 825px;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
}

/* Lista de funcionalidades: filas grandes separadas por una línea fina. */
.funcionalidades {
  margin: var(--sp-72) 0;
  padding-block: var(--sp-80);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

.funcionalidades li + li {
  padding-top: var(--sp-24);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.funcionalidad {
  display: flex;
  gap: var(--sp-24);
  align-items: center;
  transition: opacity var(--dur) var(--ease);
}

.funcionalidad:hover { opacity: var(--hover-op); }

.funcionalidad__title {
  font-size: var(--fs-func);
  line-height: var(--lh-func);
  font-weight: var(--fw-regular);
}

.funcionalidad__icon {
  flex: none;
  width: var(--caso-arrow);
  height: var(--caso-arrow);
}

.solucion__grid {
  display: grid;
  grid-template-columns: 1fr 656px;
  gap: var(--sp-56);
  align-items: center;
}

.solucion__body { display: flex; flex-direction: column; gap: var(--sp-28); }

.solucion__text { margin: 0; font-size: var(--fs-quote); line-height: var(--lh-quote); }

/* Collage de producto -------------------------------------------------------
   Cuatro piezas superpuestas. Las medidas del archivo están sobre una caja de
   656 x 434.876; acá van en % para que el conjunto escale como una unidad. */
.producto {
  position: relative;
  width: 100%;
  aspect-ratio: 656 / 434.876;
}

.producto__shot { position: absolute; }

/* Captura clara, abajo a la izquierda (394.263 x 221.763). */
.producto__shot--am {
  left: 0;
  bottom: 6.6%;
  width: 60.1%;
  height: 51%;
  object-fit: cover;
  border-radius: 7.45px;
}

/* Panel oscuro, arriba al centro (350.263 x 238.96). */
.producto__shot--dark {
  right: 9.57%;
  top: 9.13%;
  width: 53.4%;
  height: 54.95%;
  object-fit: cover;
  border-radius: 7.385px;
}

/* Captura chica, abajo a la derecha (240.314 x 140.747). */
.producto__shot--maxres {
  left: 63.19%;
  bottom: 16.55%;
  width: 36.63%;
  height: 32.37%;
  object-fit: cover;
  border-radius: 10.87px;
}

/* Logo Asset Management sobre la captura clara (159.939 x 40.626). */
.producto__logo {
  position: absolute;
  left: 7.57%;
  top: 17.34%;
  width: 24.38%;
  height: auto;
}

/* --- Claves del éxito -----------------------------------------------------
   Los ítems van al 30% de opacidad: en el diseño se encienden al hacer scroll.
   Sin JS todavía, así que se encienden en hover/focus. */
.claves { position: relative; padding-block: var(--sp-120); }

/* Ellipse 124 — la mancha naranja/violeta difuminada que arranca en el collage
   de producto y baja hasta el pie de Claves, desbordando por la derecha. Es un
   degradé radial con blur, así que va como el SVG exportado. En el frame es el
   último elemento: pinta encima del contenido y lo tiñe, por eso acá también
   va por delante (con pointer-events: none para no comerse los hovers).

   La ventana se pega al pie de la sección y de ahí sube: recorta el sobrante
   de los costados —si no, aparece scroll horizontal— y sobre todo el de abajo,
   porque la mancha se corta al ras del bloque naranja en vez de teñirlo. Hacia
   arriba no hace falta recortar: la mancha se apaga sola antes del tope. */
.caso-halo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--caso-halo-h);
  overflow: hidden;
  pointer-events: none;
}

/* Anclada al centro de la sección, que es lo que le da la misma posición
   relativa que en el archivo en los tres breakpoints. */
.caso-halo__img {
  position: absolute;
  left: calc(50% + var(--caso-halo-x));
  bottom: var(--caso-halo-y);
  width: var(--caso-halo-w);
  height: var(--caso-halo-h);
  max-width: none;
}

.claves__grid { display: flex; flex-direction: column; gap: var(--sp-72); }

.claves__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
  max-width: 459px;
}

.clave {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  font-size: var(--fs-quote);
  line-height: 26px;
  font-weight: var(--fw-medium);
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease);
}

.clave:hover { opacity: 1; }

.clave__dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* --- Cita destacada (única sección naranja) ------------------------------- */
.destacado {
  padding: var(--sp-120) var(--gutter) 150px;
  background: var(--c-orange);
  color: var(--c-white);
}

.destacado__quote {
  margin: 0 0 var(--sp-56);
  max-width: 826px;
  font-size: var(--fs-destacado);
  line-height: var(--lh-destacado);
  font-weight: var(--fw-medium);
}

.destacado__autor { display: block; opacity: 0.5; }

/* CTA: círculo con la flecha + pastilla con el texto, pegados. */
.destacado__cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-56);
  color: var(--c-white);
}

.destacado__cta-icon,
.destacado__cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: var(--r-button);
  transition: transform var(--dur) var(--ease);
}

/* La flecha va como mask para que tome el blanco del CTA, igual que .btn--text. */
.destacado__cta-icon { width: 42px; }

.destacado__cta-icon::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
  mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
}

.destacado__cta-label {
  padding-inline: var(--sp-24);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-medium);
}

.destacado__cta:hover .destacado__cta-icon,
.destacado__cta:hover .destacado__cta-label { transform: scale(var(--hover-scale)); }

/* --- Más casos ------------------------------------------------------------ */
.mas-casos { padding-block: var(--sp-100); }

.mas-casos__title {
  margin: 0 0 var(--sp-46);
  max-width: 823px;
  font-size: var(--fs-paragraph-l);
  line-height: var(--lh-paragraph-l);
  font-weight: var(--fw-regular);
}

.mas-casos__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}

.mini-caso {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  transition: opacity var(--dur) var(--ease);
}

.mini-caso:hover { opacity: var(--hover-op); }

.mini-caso img {
  width: 100%;
  aspect-ratio: 669 / 416;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Tablet (frame 800) --------------------------------------------------- */
@media (max-width: 1100px) {
  /* La ficha pasa a una columna: cada campo ocupa el ancho del contenedor. */
  .ficha { padding-top: var(--sp-100); }
  .ficha__grid { grid-template-columns: 1fr; gap: var(--sp-36); }
  .ficha .case-field { gap: var(--sp-24); }

  .caso-lead__text { max-width: 688px; }

  .acerca__grid { grid-template-columns: 1fr; gap: var(--sp-56); }
  .acerca__body { gap: var(--sp-56); }

  .desafio__text { max-width: 688px; margin-top: var(--sp-56); }

  /* Los tres retos se apilan. */
  .retos__list { grid-template-columns: 1fr; gap: var(--sp-20); }

  .cita__intro { max-width: 542px; margin-bottom: var(--sp-56); }
  .cita__figure { max-width: 537px; }

  .solucion__lead { max-width: 100%; margin-top: var(--sp-56); }
  .funcionalidades { padding-block: var(--sp-60) var(--sp-80); }

  /* El collage pasa arriba y el texto abajo. En tablet el frame lo deja
     centrado en la columna (x=36 de 728), no pegado al borde. */
  .solucion__grid { grid-template-columns: 1fr; gap: var(--sp-56); }
  .producto { max-width: 656px; margin-inline: auto; }
  .solucion__body { order: 2; }

  .mas-casos__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-24); }
  /* En tablet el diseño muestra sólo dos casos. */
  .mas-casos__list li:nth-child(3) { display: none; }
}

/* --- Mobile (frame 375) --------------------------------------------------- */
@media (max-width: 640px) {
  .ficha__grid { gap: var(--sp-28); }

  .acerca__stats { flex-direction: column; gap: var(--sp-20); }
  .acerca__stat { gap: var(--sp-28); }

  .cita__figure { margin-left: 0; }

  .funcionalidades { gap: var(--sp-24); padding-block: var(--sp-60) var(--sp-80); }

  /* El collage no es el de desktop achicado: el frame mobile lo rearma sobre
     una caja de 327 x 316 (más cuadrada) y reacomoda las cuatro piezas, con
     la captura clara sangrando por la izquierda y las otras dos por la
     derecha. Los % van sobre esa caja. */
  .solucion__grid { gap: var(--sp-72); }
  .producto { aspect-ratio: 327 / 316; }

  .producto__shot--am {
    left: -4.893%;
    bottom: -0.155%;
    width: 75.841%;
    height: 44.144%;
    border-radius: 4.686px;
  }

  .producto__shot--dark {
    right: 0.731%;
    top: 1.266%;
    width: 69.911%;
    height: 49.356%;
    border-radius: 4.82px;
  }

  .producto__shot--maxres {
    left: auto;
    right: -5.009%;
    bottom: auto;
    top: 39.873%;
    width: 47.21%;
    height: 28.612%;
    border-radius: 6.983px;
  }

  .producto__logo { left: 2.752%; top: 2.848%; width: 27.852%; }

  .claves__list { gap: var(--sp-48); }

  .destacado { padding-block: var(--sp-80) var(--sp-100); }

  .mas-casos__list { grid-template-columns: 1fr; gap: var(--sp-36); }
  /* En mobile queda un solo caso. */
  .mas-casos__list li:nth-child(2) { display: none; }
}