/* =====================================================================
   DISTRIBUTIVA — Trainologym
   Clon del Figma (DESKTOP node 100-88 / MÓVIL node 109-962)
   Depende de styles.css (tokens :root, .tgy-nav, .btn-tgy, .btn-circle,
   .overline, .dot, .cta-group, .tgy-footer)
   ===================================================================== */

.dist-ic{width:20px;height:20px;display:block;color:#fff}
.dist-ic--30{width:30px;height:30px}

/* =====================================================================
   HERO / SLIDERS  (frame 106:743)
   ===================================================================== */
.dist-hero{position:relative;height:768px;overflow:hidden;color:#fff;background:var(--tgy-bg)}
.dist-hero__bg{position:absolute;inset:0;overflow:hidden}
.dist-hero__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.dist-hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,.21)}
.dist-hero__inner{position:relative;height:100%;max-width:1440px;margin-inline:auto}

.dist-hero__title{position:absolute;left:103px;top:228px;width:747px;display:flex;flex-direction:column;align-items:flex-start}
/* Overline "Enlaces": Barlow Medium 22px, leading 1.3, alto fila 78px */
.dist-hero__overline{height:78px;gap:8px;font-weight:500;font-size:22px;line-height:1.3;letter-spacing:0}
.dist-hero__overline .dot{margin-top:0}
/* H1: Kenyan Coffee 61px / 67px, tracking .5, uppercase */
.dist-hero__h1{font-family:var(--tgy-font-display);font-weight:400;font-size:61px;line-height:67px;
  letter-spacing:.5px;text-transform:uppercase;color:#fff;margin:0;width:721px}
/* Lead: Barlow Regular 24px / 1.3, width 548 */
.dist-hero__lead{font-family:var(--tgy-font-body);font-weight:400;font-size:24px;line-height:1.3;color:#fff;
  margin:11px 0 0;width:548px;max-width:100%}
.dist-hero__cta{margin-top:24px}
/* botón CTA con gradiente a 23.95deg (Figma node 106:773) */
.dist-hero__cta .btn-tgy{background:linear-gradient(23.95deg,#641219 35%,#b31a23 53%,#ec5b31 72%)}

/* =====================================================================
   GRID DE TARJETAS  (frames 109:834 / 835 / 894)
   ===================================================================== */
.dist-grid-sec{background:var(--tgy-bg);padding:103px 0 0}
/* Contenedor de la distributiva: 3 cards (377.372) + 2 gaps (36) = 1204.116 */
.dist-container{width:100%;max-width:1204.12px;margin-inline:auto;padding-inline:16px}
.dist-row{display:flex;gap:36px;align-items:flex-start;justify-content:center;margin-bottom:74px}

/* --- Tarjeta --------------------------------------------------------- */
.dist-card{
  position:relative;
  width:377.372px;height:462px;flex:0 0 377.372px;
  background:#fff;
  /* notch del Figma (viewBox 377.372 x 417) recalculado a alto 462 (+45 abajo)
     para dar margen título/texto sin que el notch recorte el contenido */
  clip-path:path('M357.372 0C368.418 0.000214799 377.372 8.95444 377.372 20V442C377.372 453.046 368.418 462 357.372 462H151.123C139.813 462 129.8 454.688 126.357 443.915L116.825 414.085C113.382 403.312 103.369 396 92.0584 396H26C11.6406 396 0 384.359 0 370V20C0 8.95431 8.95431 0 20 0H357.372Z');
}
.dist-card__shape{position:absolute;inset:0}
.dist-card__img{position:absolute;left:17.41px;top:19px;width:337.468px;height:180px;
  border-radius:13px;object-fit:cover}
/* Bloque título+texto: en flujo (margin consistente, sin solape) anclado a top 220 */
.dist-card__body{position:absolute;left:17px;top:220px;width:343px}
/* Título: Barlow SemiBold 20px / 24px, tracking .5 — clamp 2 líneas */
.dist-card__title{margin:0;width:100%;
  font-family:var(--tgy-font-body);font-weight:600;font-size:20px;line-height:24px;
  letter-spacing:.5px;color:#000;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Texto: Barlow Regular 20px / 1.3 — margin superior contra el título, clamp 3 líneas */
.dist-card__text{margin:16px 0 0;width:100%;
  font-family:var(--tgy-font-body);font-weight:400;font-size:20px;line-height:1.3;color:#000;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-height:78px}
/* Botón circular gradiente — 58x58 en left 52, top 359 (gradiente 53.75deg) */
.dist-card__btn{position:absolute;left:52px;top:404px;width:58px;height:58px;border-radius:32px;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(53.75deg,#641219 35%,#b31a23 53%,#ec5b31 72%);
  transition:transform .25s ease,filter .25s ease}
.dist-card__btn:hover{transform:scale(1.06);filter:brightness(1.08)}
/* Pill "¿QUIERES SABER MÁS?" — 226 ancho, top 359, left 139, radio 57 */
.dist-card__pill{position:absolute;left:139px;top:404px;width:226px;height:46px;border-radius:57px;
  display:inline-flex;align-items:center;justify-content:center;padding:10px;
  font-family:var(--tgy-font-body);font-weight:600;font-size:20px;line-height:1.3;text-align:center;
  background:var(--tgy-rojo);color:#fff;white-space:nowrap;
  transition:filter .25s ease,transform .25s ease}
.dist-card__pill:hover{filter:brightness(1.06);transform:scale(1.02)}

/* --- Estado ACTIVO / HOVER (tarjeta roja) ---------------------------- */
.dist-card.is-active,.dist-card:hover{background:var(--tgy-rojo)}
.dist-card.is-active .dist-card__title,.dist-card:hover .dist-card__title,
.dist-card.is-active .dist-card__text,.dist-card:hover .dist-card__text{color:#fff}
/* pill invertido: blanco con texto oscuro */
.dist-card.is-active .dist-card__pill,.dist-card:hover .dist-card__pill{background:#fff;color:#0f0f0f}

/* =====================================================================
   PAGINACIÓN / CARRUSEL  (frame 109:946)
   ===================================================================== */
.dist-pager{display:flex;align-items:center;justify-content:space-between;
  max-width:1229px;margin:0 auto 74px;padding-inline:16px}
.dist-pager__arrow{width:32px;height:32px;border:0;background:none;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.dist-pager__arrow svg{width:32px;height:32px}
/* flecha derecha dentro de círculo con gradiente (48x48, padding 8) */
.dist-pager__arrow--next{width:48px;height:48px;border-radius:100px;color:#fff;
  background:linear-gradient(53.75deg,#641219 35%,#b31a23 53%,#ec5b31 72%);
  transition:transform .25s ease,filter .25s ease}
.dist-pager__arrow--next svg{width:32px;height:32px}
.dist-pager__arrow--next:hover{transform:scale(1.06);filter:brightness(1.08)}
/* dots: 14px activo (rojo) + 12px inactivos (gris) */
.dist-pager__dots{display:flex;align-items:center;gap:12px}
.dist-dot{width:12px;height:12px;border-radius:50%;background:#cdced0;display:inline-block}
.dist-dot.is-active{width:14px;height:14px;background:var(--tgy-rojo)}

/* paginación numérica (sólo móvil) */
.dist-pager--mobile{display:none}
.dist-pager__nums{display:flex;align-items:center;gap:10px}
.dist-num{min-width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--tgy-font-body);font-weight:600;font-size:18px;color:#fff}
.dist-num.is-active{background:var(--tgy-rojo);color:#fff}

/* =====================================================================
   RESPONSIVE — MÓVIL (≤ 991.98px)  · frame 109:962 (393px)
   ===================================================================== */
@media (max-width:991.98px){
  /* HERO */
  .dist-hero{height:auto;min-height:560px;padding-bottom:8px;width:100%;max-width:100vw}
  .dist-hero__bg img{inset:0;width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center}
  .dist-hero__inner{max-width:100vw;width:100%}
  .dist-hero__title{position:relative;left:auto;top:auto;width:100vw;max-width:100vw;box-sizing:border-box;
    padding:150px 30px 56px;align-items:flex-start}
  .dist-hero__overline{height:auto;margin-bottom:14px;font-size:18px}
  .dist-hero__overline .dot{width:18px;height:18px}
  .dist-hero__h1{font-size:34px;line-height:36px;width:calc(100vw - 60px);max-width:calc(100vw - 60px);
    white-space:normal;overflow-wrap:break-word}
  .dist-hero__lead{font-size:16px;width:calc(100vw - 60px);max-width:calc(100vw - 60px);margin-top:14px;
    white-space:normal;overflow-wrap:break-word}
  .dist-hero__cta{margin-top:24px}

  /* GRID -> una columna · card móvil exacta 333x396 (Figma 109:1224) */
  .dist-grid-sec{padding:40px 0 0}
  .dist-container{max-width:none;padding-inline:30px}
  .dist-row{flex-direction:column;align-items:center;gap:35px;margin-bottom:35px}
  .dist-card{width:100%;max-width:333px;flex:0 0 auto;
    /* notch exacto escalado a 333x396 (Subtract 109:1226) */
    height:396px;
    clip-path:path('M315.35 0C325.1 0.0 333.0 8.5 333.0 18.99V377.01C333.0 387.5 325.1 396.0 315.35 396.0H133.35C123.37 396.0 114.54 389.06 111.5 378.83L103.09 350.5C100.05 340.27 91.21 333.32 81.23 333.32H22.94C10.27 333.32 0 322.27 0 308.63V18.99C0 8.5 7.9 0 17.65 0H315.35Z')}
  /* image 7: x15.37 y18.04 w297.79 h170.94 */
  .dist-card__img{left:15.37px;top:18.04px;width:297.79px;height:170.94px}
  /* Móvil: layout absoluto original (el bloque en flujo se desactiva) */
  .dist-card__body{position:static;display:contents}
  .dist-card__title{position:absolute;left:22px;top:208px;width:296px}
  .dist-card__text{position:absolute;margin:0;left:22px;top:257px;width:296px;height:52px;overflow:hidden;
    font-size:14px;line-height:1.35}
  /* Button 58x58 x8 y340 · Pill 226x46 x89 y336 */
  .dist-card__btn{left:8px;top:340px;width:58px;height:58px}
  .dist-card__btn .dist-ic--30{width:30px;height:30px}
  .dist-card__pill{left:120px;top:340px;width:195px;height:41px;font-size:18px}

  /* paginación: ocultar dots, mostrar números */
  .dist-pager:not(.dist-pager--mobile){display:none}
  .dist-pager--mobile{display:flex;max-width:none;margin-bottom:0;padding-inline:30px}
}

@media (max-width:400px){
  .dist-card{max-width:none}
}