/* ========== Capital Humano v2 (prefijo ch2-) ========== */
.ch2{ --bg:#0b1526; --panel:#0f2136; --line:rgba(255,255,255,.10); --txt:#e9effb; --muted:#cfd7ea; --accent1:#59c2a3; --accent2:#7bb6ff; background:var(--bg); color:var(--txt); }

/* Container */
.ch2-container{ width:min(1120px, 92%); margin-inline:auto; }
.ch2-head{ text-align:center; margin-bottom:1.25rem; }
.ch2-h1{ font-size:clamp(32px,5vw,56px); margin:.2rem 0 .6rem; line-height:1.05; }
.ch2-h2{ font-size:clamp(26px,3.2vw,34px); margin:0 0 .25rem; }
.ch2-h3{ font-size:clamp(18px,2.2vw,22px); margin:.25rem 0 .4rem; }
.ch2-lead{ color:var(--muted); }

/* Hero */
.ch2-hero{ position:relative; min-height:68vh; display:grid; place-items:center; overflow:hidden; }
.ch2-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); filter:contrast(1.1) saturate(1.05); }
.ch2-hero-overlay{ position:absolute; inset:0; background:
  radial-gradient(70% 55% at 50% 30%, rgba(0,0,0,.2), rgba(0,0,0,.65)),
  linear-gradient(180deg, rgba(11,21,38,0) 0%, var(--bg) 85%); }
.ch2-hero-inner{ position:relative; text-align:center; z-index:2; padding:3rem 1rem; width:min(900px, 92%); }
.ch2-eyebrow{ letter-spacing:.14em; opacity:.9; margin:0 0 .25rem; }
.ch2-sub{ color:#fff; opacity:.95; max-width:760px; margin:0 auto 1.1rem; }
.ch2-cta-row{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.ch2-btn{ padding:.7rem 1rem; border-radius:999px; font-weight:600; text-decoration:none; display:inline-block; border:1px solid transparent; }
.ch2-btn--primary{ background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#071421; }
.ch2-btn--ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:var(--line); }
.ch2-hero-bottom-curve{ position:absolute; bottom:-1px; left:0; right:0; height:18vw; background:var(--bg);
  clip-path:ellipse(120% 100% at 50% 0%); }

/* Intro */
.ch2-intro{ padding:2.25rem 0 .5rem; }
.ch2-bubble{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:1.2rem 1.4rem;
  box-shadow:0 10px 28px rgba(0,0,0,.28); text-align:center; color:var(--muted); }

/* Servicios */
.ch2-services{ padding:1rem 0 2.4rem; }
.ch2-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(3,1fr); }
@media (max-width: 1024px){ .ch2-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .ch2-grid{ grid-template-columns:1fr; } }

.ch2-card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:1.25rem 1.1rem; text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.28); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ch2-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.34); border-color:rgba(255,255,255,.16); }
.ch2-card p{ color:#e6edf9; max-width:46ch; margin:0 auto; }

/* Badge */
.ch2-badge{ width:66px; height:66px; margin:-44px auto 10px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#15355c,#0e2240); position:relative; box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.ch2-ring{ position:absolute; inset:-8px; border:2px solid rgba(255,255,255,.15); border-radius:999px; }
.ch2-badge svg{ width:26px; height:26px; fill:#fff; }

/* Proceso */
.ch2-process{ padding:1.2rem 0 2.2rem; }
.ch2-steps{ list-style:none; margin:1rem auto 0; padding:0; width:min(820px, 92%); display:grid; gap:.6rem; }
.ch2-steps li{ display:flex; align-items:center; gap:.75rem; background:var(--panel); border:1px solid var(--line); padding:.8rem 1rem; border-radius:14px; }
.ch2-steps li span{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#061321;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); }
.ch2-steps b{ color:#fff; }

/* Beneficios */
.ch2-benefits{ padding:.6rem 0 1.8rem; }
.ch2-benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
@media (max-width: 1024px){ .ch2-benefit-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .ch2-benefit-grid{ grid-template-columns:1fr;} }
.ch2-benefit{ background:var(--panel); border:1px solid var(--line); padding:.8rem 1rem; border-radius:14px; color:#e6edf9; }
.ch2-benefit span{ margin-right:.5rem; }

/* FAQ */
.ch2-faq{ padding:.8rem 0 2.2rem; }
.ch2-accordion details{ background:var(--panel); border:1px solid var(--line); border-radius:14px; margin:.5rem 0; padding:.6rem 1rem; }
.ch2-accordion summary{ cursor:pointer; font-weight:600; color:#fff; outline:none; }
.ch2-ans{ margin-top:.5rem; color:#e6edf9; }

/* CTA */
.ch2-cta{ padding:1rem 0 3rem; }
.ch2-cta-box{ background:linear-gradient(135deg, rgba(89,194,163,.15), rgba(123,182,255,.15)); border:1px solid var(--line);
  border-radius:18px; text-align:center; padding:1.4rem; }
.ch2-cta-title{ margin:.2rem 0 .8rem; }

.ch2-bubble p {
  color: #ffffff; /* blanco */
}

/* Texto de la burbuja en blanco */
.ch2-bubble,
.ch2-bubble p {
  color: #ffffff;
}

/* Títulos de servicios en blanco */
.ch2-h3 {
  color: #ffffff;
}

/* ======= REFINES PRO (solo estilo, sin cambiar texto) ======= */

/* Paleta y tipografía más corporativa */
.ch2{
  --bg:#0b1320;            /* fondo más profundo */
  --panel:#0f1e33;         /* tarjetas más sobrias */
  --line:rgba(255,255,255,.12);
  --txt:#ffffff;
  --muted:#dbe6ff;         /* textos secundarios más claros */
  --accent1:#49c1a7;
  --accent2:#77a8ff;
  font-family: "Montserrat", "Open Sans", system-ui, -apple-system, sans-serif;
}

/* Contenedor y ritmo vertical */
.ch2-container{ width:min(1080px,92%); margin-inline:auto; }
.ch2 section, .ch2 .ch2-services{ scroll-margin-top:90px; }
.ch2 .ch2-services{ padding:1.6rem 0 3rem; }

/* HERO más institucional (sin imagen también se ve bien) */
.ch2-hero{
  min-height:60vh;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #0d1b2e 0%, var(--bg) 85%);
}
.ch2-hero-overlay{ background: transparent; }
.ch2-hero-inner{ max-width:820px; padding:3.5rem 1rem; }
.ch2-h1{
  font-size:clamp(38px,5.8vw,64px);
  letter-spacing:.04em;
  font-weight:800;
  color:#fff;
  margin:0 0 .25rem;
}
.ch2-sub{
  font-size:clamp(18px,2.2vw,22px);
  font-weight:500;
  color:#e9f1ff;
  opacity:.95;
}

/* Intro “burbuja” más elegante */
.ch2-intro{ padding:2.2rem 0 1.2rem; }
.ch2-bubble{
  color:#fff;                                  /* lo querías en blanco */
  background: linear-gradient(180deg,#0f2136,#112640);
  border:1px solid var(--line);
  border-radius:22px;
  padding:1.4rem 1.6rem;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.ch2-bubble p{
  color:#fff;                                   /* énfasis en blanco */
  font-size:1.05rem;
  line-height:1.7;
}

/* Grid más profesional: 2 columnas, centrado y estable */
.ch2-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem 1.25rem;
  max-width:980px;
  margin:1.2rem auto 0;
}
@media (max-width: 900px){ .ch2-grid{ grid-template-columns:1fr; max-width:680px; }}

/* Tarjeta: alineación izquierda, jerarquía clara y altura consistente */
.ch2-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.35rem 1.25rem 1.25rem;
  text-align:left;
  display:flex; flex-direction:column; gap:.6rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  min-height:210px;
}
.ch2-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.32); border-color:rgba(255,255,255,.18); }

/* Badge sobrio alineado al título */
.ch2-badge{
  width:56px; height:56px; margin:0 0 .25rem 0;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#163457,#0f233f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 8px 18px rgba(0,0,0,.35);
  position:relative;
}
.ch2-ring{ position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(255,255,255,.14); }
.ch2-badge svg{ width:22px; height:22px; fill:#fff; opacity:.95; }

/* Título y texto (en blanco + legibilidad) */
.ch2-h3{ color:#fff; font-weight:700; margin:.1rem 0 .15rem; letter-spacing:.01em; }
.ch2-card p{
  color:#f1f6ff;             /* blanco suave */
  font-size:1.02rem;
  line-height:1.6;
  margin:0;
  max-width:52ch;
}

/* Pequeñas animaciones de entrada (opcionales) */
@keyframes ch2-fadeUp { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.ch2-card{ animation: ch2-fadeUp .4s ease both; }
.ch2-card:nth-child(2){ animation-delay:.05s }
.ch2-card:nth-child(3){ animation-delay:.1s }
.ch2-card:nth-child(4){ animation-delay:.15s }
.ch2-card:nth-child(5){ animation-delay:.2s }
.ch2-card:nth-child(6){ animation-delay:.25s }

/* Curva inferior del hero más sutil */
.ch2-hero-bottom-curve{
  height:16vw; clip-path:ellipse(120% 100% at 50% 0%);
  background: linear-gradient(180deg, transparent 0%, var(--bg) 60%);
}

/* ======== PRO LOOK LOGÍSTICA + HR (sin tocar textos) ======== */
.ch2{
  --bg:#0a1220;         /* fondo sobrio */
  --panel:#0e1c30;      /* tarjetas */
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.08);
  --txt:#ffffff;
  --muted:#dbe6ff;
  --accent1:#46c0a6;    /* acentos profesionales */
  --accent2:#6ea7ff;
  --accent-ink:#cfe7ff; /* para strokes de íconos */
  font-family: "Montserrat","Open Sans",system-ui,-apple-system,sans-serif;
  color:var(--txt);
}

/* HERO: institucional, sin imagen también luce */
.ch2-hero{
  min-height:60vh;
  background:
    radial-gradient(110% 70% at 50% 18%, rgba(110,167,255,.10) 0%, rgba(110,167,255,0) 55%),
    linear-gradient(180deg,#0d1b2e 0%, var(--bg) 85%);
}
.ch2-hero-inner{ max-width:820px; padding:3.5rem 1rem; text-align:center; }
.ch2-h1{ font-size:clamp(40px,6vw,64px); font-weight:800; letter-spacing:.03em; margin:0 0 .25rem; }
.ch2-sub{ font-size:clamp(18px,2.2vw,22px); font-weight:500; color:#e9f1ff; opacity:.96; }
.ch2-hero-bottom-curve{
  height:16vw; clip-path:ellipse(120% 100% at 50% 0%);
  background: linear-gradient(180deg, transparent 0%, var(--bg) 60%);
}

/* INTRO */
.ch2-intro{ padding:2.1rem 0 1.1rem; }
.ch2-bubble{
  background:linear-gradient(180deg,#10253f,#0f2037);
  border:1px solid var(--line);
  border-radius:22px;
  padding:1.35rem 1.6rem;
  box-shadow:0 16px 40px rgba(0,0,0,.26);
}
.ch2-bubble, .ch2-bubble p{ color:#fff; line-height:1.7; }

/* GRID EJECUTIVO: 2 col + center */
.ch2-services{ padding:1.4rem 0 3rem; }
.ch2-container{ width:min(1080px,92%); margin-inline:auto; }
.ch2-grid{
  display:grid; gap:1.25rem 1.25rem; margin:1.1rem auto 0; max-width:980px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width: 900px){ .ch2-grid{ grid-template-columns:1fr; max-width:680px; }}

/* CARD corporativa */
.ch2-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.35rem 1.25rem 1.2rem;
  display:flex; flex-direction:column; gap:.65rem;
  text-align:left;
  box-shadow:0 12px 26px rgba(0,0,0,.24);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  min-height:210px;
}
.ch2-card::after{ /* línea superior de acento muy sutil */
  content:""; position:absolute; left:12px; right:12px; top:0;
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  opacity:.28;
}
.ch2-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.18);
}

/* BADGE: ícono outline uniforme */
.ch2-badge{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(180deg,#153357,#0e223e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.35);
  position:relative;
}
.ch2-ring{ position:absolute; inset:-6px; border:2px solid var(--line); border-radius:999px; }
.ch2-badge svg{
  width:26px; height:26px; fill:none;
  stroke:var(--accent-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* TÍTULOS y párrafos en blanco */
.ch2-h3{ color:#fff; font-weight:700; letter-spacing:.01em; margin:.2rem 0 .15rem; }
.ch2-card p{ color:#f4f8ff; line-height:1.6; margin:0; max-width:54ch; font-size:1.02rem; }

/* Microanimación */
@keyframes ch2-fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.ch2-card{ animation: ch2-fade .35s ease both; }
.ch2-card:nth-child(2){ animation-delay:.05s } .ch2-card:nth-child(3){ animation-delay:.1s }
.ch2-card:nth-child(4){ animation-delay:.15s } .ch2-card:nth-child(5){ animation-delay:.2s }
.ch2-card:nth-child(6){ animation-delay:.25s }

/* Bootstrap Icons dentro del badge */
.ch2-badge i {
  font-size: 26px;         /* tamaño del ícono */
  color: #cfe7ff;          /* tono profesional */
}

/* (Opcional) hover con acento sutil */
.ch2-card:hover .ch2-badge i {
  color: #e8f2ff;
}


/* INICIA NUEVOS STLOS*/
/* ====== HOMOLOGACIÓN CON ESTILO WEBFLOW (solo overrides) ====== */

/* 1) Paleta y tipografías del sitio */
.ch2{
  /* Colores del sitio */
  --bg: #282461;          /* morado de secciones /         / .section.round-top-left-corner */ 
  --panel: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.20);
  --txt: #ffffff;
  --muted: rgba(255,255,255,0.85);
  --accent1: #2f583f;     /* verde sitio (botones/bordes) */
  --accent2: #2f583f;

  font-family: Generalsans, "Open Sans", Montserrat, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--txt);

  /* 2) Ritmo vertical como .section */
  padding-top: 120px;     /* igual que otras secciones */
  padding-bottom: 120px;  /* filecite: dv-logistics.webflow.css */
}

/* 3) Contenedor más cercano a .wide-container (centrado) */
.ch2-container{
  width: min(1100px, 92%);
  margin-inline: auto;
}

/* 4) HERO más sobrio (alineado al resto de secciones) */
.ch2-hero{
  min-height: auto;       /* evita "pantalla completa" distinta al resto */
  padding: 0 0 30px;
  background: transparent; /* el fondo ya lo aporta .ch2 */
  overflow: visible;
}
.ch2-hero-img{ display:none; }          /* quitamos imagen full-bleed para uniformidad */
.ch2-hero-overlay{ display:none; }
.ch2-hero-bottom-curve{ display:none; } /* elimina curva que rompe la línea del layout */

.ch2-hero-inner{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: left;                       /* los headers del sitio suelen ir a la izq. */
  position: relative;
}

/* 5) Títulos al sistema del sitio (heading-2/3) */
.ch2-h1{
  /* cercano a h2.white del sitio */
  font-family: Generalsans, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: clamp(28px, 4.2vw, 36px);   /* h2 ~36px en desktop */
  line-height: 130%;
  margin: 0 0 10px;
}
.ch2-sub{
  font-family: Generalsans, sans-serif;
  color: rgba(255,255,255,0.85);
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 140%;
}

/* 6) “Border” vertical de marca como en .heading-wrapper .border */
.ch2-hero-inner{
  padding-left: 22px;                     /* espacio para pseudo-borde */
}
.ch2-hero-inner::before{
  content:"";
  position:absolute;
  left: 0; top: 0.2rem;
  width: 6px; height: calc(100% - 0.2rem);
  border-radius: 90px;
  background: #2f583f;                    /* verde sitio */
  border: 3px solid #2f583f;
  opacity: 1;
}

/* 7) Intro “burbuja” alineada */
.ch2-intro{ padding: 20px 0 10px; }
.ch2-bubble{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: #fff;
  box-shadow: none;                       /* el resto del sitio no usa sombras tan marcadas */
}
.ch2-bubble p{
  color:#fff;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;                        /* como .paragraph */
  line-height: 140%;
}

/* 8) Cards y grid con proporciones del sitio */
.ch2-services{ padding: 30px 0 0; }
.ch2-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* como bloques de “servicios” */
  gap: 20px;                                       /* interlineado consistente */
}
@media (max-width: 900px){ .ch2-grid{ grid-template-columns: 1fr; } }

.ch2-card{
  text-align: left;                                  /* igual que feature rows */
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: none;
  transition: transform .2s ease;
}
.ch2-card:hover{ transform: translateY(-2px); }
.ch2-h3{
  font-family: Generalsans, sans-serif;
  font-weight: 600;                                  /* heading-3 semibold */
  font-size: 24px;                                   /* h3 del sitio */
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
}
.ch2-card p{
  font-family: "Open Sans", sans-serif;
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  line-height: 140%;
  margin: 0;
}

/* 9) Badge/Iconografía en línea con iconos de “Valores” */
.ch2-badge{
  width: 44px; height: 44px;
  margin: 0 0 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  display: inline-grid; place-items: center;
}
.ch2-badge .bi{ font-size: 20px; color: #fff; } /* usa Bootstrap Icons ya cargadas */

/* 10) Suaviza anclas internas como en el resto de la página */
#ch2-servicios{ scroll-margin-top: 100px; }

/* --- Ajuste de iconos a formato redondo sin fondo cuadrado --- */
.ch2-badge{
  width: 54px;
  height: 54px;
  margin: 0 0 14px;
  background: transparent;                /* sin fondo sólido */
  border: 2px solid var(--accent1);        /* borde fino con el verde del sitio */
  border-radius: 50%;                      /* redondo perfecto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}
.ch2-badge .bi{
  font-size: 22px;
  color: #fff;                             /* blanco para contraste */
}
.ch2-card:hover .ch2-badge{
  border-color: #fff;                      /* hover: resalta el borde */
}

/* --- Mostrar la imagen hero con ajuste de estilo --- */
.ch2-hero-img{
  display: block;                          /* aseguramos que se vea */
  width: 100%;
  max-height: 320px;                       /* altura controlada */
  object-fit: cover;                       /* recorte para que no se deforme */
  border-radius: 16px;                     /* esquinas suaves */
  margin-bottom: 20px;
}

/* === Carrusel Capital Humano (CHC) === */
.chc-wrap {
  position: relative;
  margin-top: 1rem;
}

.chc-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  padding: 0 .25rem;
}
.chc-viewport::-webkit-scrollbar { display: none; } /* WebKit */

.chc-track {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  padding: .25rem .5rem 1rem;
}

.chc-slide {
  flex: 0 0 85%;
  max-width: 85%;
  scroll-snap-align: center;
}

@media (min-width: 640px) {
  .chc-slide { flex-basis: 60%; max-width: 60%; }
}
@media (min-width: 992px) {
  .chc-slide { flex-basis: 33.333%; max-width: 33.333%; }
}

.chc-card {
  height: 100%;
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  color: #fff;
}
.chc-card h3 {
  margin: 0 0 .5rem;
  font-size: clamp(18px, 2.4vw, 22px);
}
.chc-card p {
  margin: 0;
  color: #eaeaea;
  line-height: 1.5;
}

/* Flechas */
.chc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.chc-btn:hover { background: rgba(0,0,0,.5); transform: translateY(-50%) scale(1.05); }
.chc-btn:disabled { opacity:.35; cursor: default; }

.chc-prev { left: -4px; }
.chc-next { right: -4px; }
@media (max-width: 480px) {
  .chc-prev { left: 4px; }
  .chc-next { right: 4px; }
}

/* Dots */
.chc-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: .25rem;
}
.chc-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.35);
  transition: transform .2s ease, background .2s ease;
}
.chc-dot.is-active { background: #f0c93d; transform: scale(1.2); }