/* ═══════════════════════════════════════════════════════════════════════════
   sitio.gt V7.18 — Identidad chapina
   Tarjetas angostas de colores arriba del inicio, cada área con su color, su glifo (cartucho) y su motivo,
   el conteo también en números mayas, el punto de «.gt» como rombo tejido y el ∞ de colores al cargar.
   Colores de tintes y materiales de Guatemala (añil, jade, cochinilla, achiote, maíz, cacao, azul maya).
   Los motivos son dibujos propios con geometría simple (escalones, grecas, rombos, zigzag).
   Solo carga con el interruptor «Identidad chapina (7.18)» encendido; apagado, el sitio queda como la 7.17.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fichas ─────────────────────────────────────────────────────────── */
html body.sitio-chapin {
  --ch-anil: #27348B; --ch-jade: #0B7A5C; --ch-cochinilla: #A3194B; --ch-achiote: #B83A1B; --ch-morado: #5B2A86;
  --ch-cacao: #6A3B24; --ch-maiz: #E8B321; --ch-maiz-ink: #2A1C00; --ch-rosa: #C2185B; --ch-azul: #16728A;
  --ch-quetzal: #2E7D32; --ch-obsidiana: #1F2937;
  --ch-gap: 10px; --ch-r: 20px;
  /* La faja de colores: todas las posibilidades */
  --ch-faja: linear-gradient(180deg, var(--ch-maiz) 0 20%, var(--ch-achiote) 0 40%, var(--ch-cochinilla) 0 60%, var(--ch-anil) 0 80%, var(--ch-jade) 0);
  /* Luz arriba a la derecha (detrás del arte) y sombra abajo a la izquierda (detrás del texto: el contraste sube) */
  --ch-light: radial-gradient(90% 115% at 100% 0%, rgba(255,255,255,.17), rgba(255,255,255,0) 62%), linear-gradient(200deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.2) 100%);
  --ch-p-escalon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20' viewBox='0 0 16 10'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='1.1' stroke-linecap='square'%3E%3Cpath d='M0.5 8.5H3.5V6.5H5.5V4.5H7.5V2.5H9.5V1.5H14.5V7.5H11.5V4.5H12.5'/%3E%3Cpath d='M0 9.6H16'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-greca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='.9'%3E%3Cpath d='M0 9.5H10M0 0.5H10'/%3E%3Cpath d='M0.5 7.5H8.5V2.5H2.5V5.5H6.5V4.5H4.5'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-brocado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath d='M8 0L16 8L8 16L0 8Z' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='.9'/%3E%3Cpath d='M8 5.2L10.8 8L8 10.8L5.2 8Z' fill='%23fff' fill-opacity='.3'/%3E%3Cg fill='%23fff' fill-opacity='.36'%3E%3Ccircle cx='0' cy='0' r='1.1'/%3E%3Ccircle cx='16' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='16' r='1.1'/%3E%3Ccircle cx='16' cy='16' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-faja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.36' stroke-width='1.2'%3E%3Cpath d='M1.5 0V16M22.5 0V16'/%3E%3Cpath d='M12 0L19 8L12 16L5 8Z'/%3E%3C/g%3E%3Cpath d='M12 4.8L15.2 8L12 11.2L8.8 8Z' fill='%23fff' fill-opacity='.42'/%3E%3C/svg%3E");
  --ch-p-petate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 12 12'%3E%3Cg stroke='%23fff' stroke-opacity='.26' stroke-width='.8'%3E%3Cpath d='M0 1.5H6M0 3H6M0 4.5H6M6 7.5H12M6 9H12M6 10.5H12'/%3E%3Cpath d='M7.5 0V6M9 0V6M10.5 0V6M1.5 6V12M3 6V12M4.5 6V12'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-maiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 8 7'%3E%3Cg fill='%23fff' fill-opacity='.26'%3E%3Crect x='.6' y='.5' width='2.8' height='2.6' rx='1.2'/%3E%3Crect x='4.6' y='.5' width='2.8' height='2.6' rx='1.2'/%3E%3Crect x='2.6' y='4' width='2.8' height='2.6' rx='1.2'/%3E%3Crect x='-1.4' y='4' width='2.8' height='2.6' rx='1.2'/%3E%3Crect x='6.6' y='4' width='2.8' height='2.6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-volcanes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='64' viewBox='0 0 200 64'%3E%3Cpath d='M4 64L64 13Q74 5 84 13L148 64Z' fill='%23fff' fill-opacity='.14'/%3E%3Cpath d='M96 64L140 25Q147 19 153 25L160 31L166 27Q172 23 178 29L214 64Z' fill='%23000' fill-opacity='.17'/%3E%3Cg fill='%23fff' fill-opacity='.2'%3E%3Ccircle cx='170' cy='16' r='4'/%3E%3Ccircle cx='177' cy='11.5' r='5'/%3E%3Ccircle cx='185.5' cy='13.5' r='3.6'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' viewBox='0 0 12 11'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.38' stroke-width='1.3'%3E%3Cpath d='M0 5.5L6 0.8L12 5.5'/%3E%3Cpath d='M0 10L6 5.3L12 10'/%3E%3C/g%3E%3C/svg%3E");
  --ch-p-punto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%23fff' fill-opacity='.5'/%3E%3C/svg%3E");
}

/* ── 2. Arriba del inicio: tarjetas una al lado de la otra ─────────────── */
/* .ch-top es el contenedor: el número de tarjetas sigue al ancho real (en tableta el sitio va en una columna de 430 px) */
html body.sitio-chapin .ch-top { padding: 12px 0 0; container: chtop / inline-size; }
html body.sitio-chapin .ch-hero { position: relative; }
html body.sitio-chapin .ch-track {
  display: flex; gap: var(--ch-gap); align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--h7-x, 16px); padding: 2px var(--h7-x, 16px) 4px;
  scrollbar-width: none; position: relative;
}
html body.sitio-chapin .ch-track::-webkit-scrollbar { display: none; }

html body.sitio-chapin .ch-track > .ch-card {
  /* En el celular se asoma la siguiente */
  flex: 0 0 84%; flex: 0 0 min(340px, calc(100% - 44px));
  scroll-snap-align: start;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; min-height: 190px; min-width: 0;
  border-radius: var(--ch-r);
  background-color: var(--c, var(--ch-anil)); background-image: var(--ch-light);
  color: var(--ink, #fff); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
html body.sitio-chapin .ch-track > .ch-card:active { transform: scale(.985); }
html body.sitio-chapin .ch-track > .ch-card:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
html body.sitio-chapin .ch-track > .ch-card.is-light:focus-visible { outline-color: var(--ch-maiz-ink); }
@media (hover: hover) and (pointer: fine) {
  html body.sitio-chapin .ch-track > .ch-card:hover { transform: translateY(-2px); }
  html body.sitio-chapin .ch-track > .ch-card:hover .ch-cta svg { transform: translateX(2px); }
}
@container chtop (min-width: 560px) {
  html body.sitio-chapin .ch-track > .ch-card { flex-basis: calc((100% - var(--ch-gap)) / 2 - 22px); }
}
@container chtop (min-width: 820px) {
  html body.sitio-chapin .ch-track > .ch-card { flex-basis: calc((100% - 2 * var(--ch-gap)) / 3 - 16px); }
}
@container chtop (min-width: 930px) {
  html body.sitio-chapin .ch-track > .ch-card { flex-basis: calc((100% - 2 * var(--ch-gap)) / 3); }
}
/* En pantallas anchas, cuatro a la vista: tarjetas angostas, más fáciles de leer */
@container chtop (min-width: 1100px) {
  html body.sitio-chapin .ch-track > .ch-card { flex-basis: calc((100% - 3 * var(--ch-gap)) / 4); }
}
@media (min-width: 1024px) {
  html body.sitio-chapin { --ch-gap: 14px; --ch-r: 22px; }
  html body.sitio-chapin .ch-top { padding-top: 20px; }
  html body.sitio-chapin .ch-track > .ch-card { min-height: 212px; }
}

/* ── 3. Por dentro de cada tarjeta ─────────────────────────────────────── */
html body.sitio-chapin .ch-card > .ch-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html body.sitio-chapin .ch-motif::before,
html body.sitio-chapin .ch-motif::after { content: ""; position: absolute; pointer-events: none; }
html body.sitio-chapin .ch-card > .ch-art { position: absolute; z-index: 1; pointer-events: none; }
html body.sitio-chapin .ch-card > .ch-body {
  position: relative; z-index: 1; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px var(--art-w, 16px) 20px 18px;
}
/* Lugar para el arte de la derecha (la etiqueta de arriba sí puede pasar por encima: el arte va más abajo) */
html body.sitio-chapin .ch-card > .ch-body { --art-w: 16px; }
html body.sitio-chapin .ch-card > .ch-photos ~ .ch-body { --art-w: 124px; }
html body.sitio-chapin .ch-card > .ch-big ~ .ch-body { --art-w: 100px; }
html body.sitio-chapin .ch-card > .ch-seal ~ .ch-body { --art-w: 112px; }
html body.sitio-chapin .ch-card > .ch-mark ~ .ch-body { --art-w: 62px; }
html body.sitio-chapin .ch-card.has-img > .ch-body { --art-w: 18px; max-width: 78%; }

html body.sitio-chapin .ch-label {
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + var(--art-w, 16px) - 16px);
  height: 26px; padding: 0 11px 0 4px; border-radius: 999px;
  background: rgba(0,0,0,.2); color: inherit;
  font-family: var(--fd); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: 0;
  white-space: nowrap;
}
html body.sitio-chapin .ch-label > span:last-child { overflow: hidden; text-overflow: ellipsis; }
html body.sitio-chapin .ch-title {
  display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 10px 0 0; color: inherit;
  font-family: var(--fd); font-weight: 800; font-size: 19px; line-height: 1.14; letter-spacing: -.022em;
  text-wrap: balance;
}
html body.sitio-chapin .ch-sub {
  display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 6px 0 0; color: rgba(255,255,255,.94);
  font-family: var(--fb); font-weight: 500; font-size: 12.5px; line-height: 1.38;
}
html body.sitio-chapin .ch-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 10px 0 14px; border-radius: 999px;
  background: #fff; color: var(--c, var(--ch-anil));
  font-family: var(--fd); font-weight: 800; font-size: 13px; line-height: 1; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.45);
}
html body.sitio-chapin .ch-cta svg { flex: 0 0 auto; transition: transform .18s ease; }
/* lo de antes del botón deja siempre un respiro */
html body.sitio-chapin .ch-body > :nth-last-child(2) { margin-bottom: 14px; }
@media (min-width: 1024px) {
  html body.sitio-chapin .ch-card > .ch-body { padding: 18px var(--art-w, 18px) 22px 20px; }
  html body.sitio-chapin .ch-title { font-size: 20px; }
  html body.sitio-chapin .ch-sub { font-size: 13px; }
}

/* Tarjeta clara (maíz): letra de tinta */
html body.sitio-chapin .ch-card.is-light .ch-label { background: rgba(42,28,0,.1); }
html body.sitio-chapin .ch-card.is-light .ch-sub { color: rgba(42,28,0,.84); }
html body.sitio-chapin .ch-card.is-light .ch-cta { background: var(--ch-maiz-ink); color: #FFE7A3; }
html body.sitio-chapin .ch-card.is-light .ch-motif::before,
html body.sitio-chapin .ch-card.is-light .ch-motif::after { filter: invert(1); opacity: .62; }

/* Tarjeta con la imagen del equipo: la imagen de fondo y una sombra para leer */
html body.sitio-chapin .ch-card.has-img { background: var(--ch-obsidiana); }
html body.sitio-chapin .ch-card > .ch-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
html body.sitio-chapin .ch-card.has-img > .ch-motif { background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.36) 56%, rgba(0,0,0,.08) 100%); }
html body.sitio-chapin .ch-card.has-img > .ch-motif::before,
html body.sitio-chapin .ch-card.has-img > .ch-motif::after { display: none; }
html body.sitio-chapin .ch-card.has-img .ch-title,
html body.sitio-chapin .ch-card.has-img .ch-sub { text-shadow: 0 1px 10px rgba(0,0,0,.4); }

/* Arte: dos fotos reales como estampas */
html body.sitio-chapin .ch-photos { right: 10px; top: 50%; width: 104px; height: 126px; margin-top: -63px; }
html body.sitio-chapin .ch-ph {
  position: absolute; display: block; width: 74px; height: 74px; object-fit: cover;
  border-radius: 15px; border: 3px solid #fff; background: #fff;
  box-shadow: 0 12px 22px -10px rgba(0,0,0,.55);
}
html body.sitio-chapin .ch-ph-1 { left: 0; top: 0; transform: rotate(-7deg); }
html body.sitio-chapin .ch-ph-2 { right: 0; bottom: 0; width: 80px; height: 80px; transform: rotate(6deg); }
/* Arte: el glifo grande */
html body.sitio-chapin .ch-big { right: 18px; top: 50%; margin-top: -38px; }
/* Arte: la marca (S e ∞) muy suave, cortada en la esquina */
html body.sitio-chapin .ch-mark { right: 8px; bottom: -34px; line-height: 0; }
html body.sitio-chapin .ch-mark svg { width: 150px; height: 150px; display: block; }
/* Arte: el sello de fundadora */
html body.sitio-chapin .ch-seal {
  right: 16px; top: 50%; width: 86px; height: 86px; margin-top: -43px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(255,255,255,.14); color: #FFD86B;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), 0 10px 22px -12px rgba(0,0,0,.5);
}
html body.sitio-chapin .ch-seal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.45); }
html body.sitio-chapin .ch-seal b { font-family: var(--fd); font-weight: 800; font-size: 9.5px; line-height: 1; color: #fff; letter-spacing: .01em; }
html body.sitio-chapin .ch-seal svg { display: block; }

/* ── 4. Motivos de las tarjetas ────────────────────────────────────────── */
/* Escalón: greca escalonada en la orilla de abajo y la esquina en escalones */
html body.sitio-chapin .ch-card.ch-m-escalon {
  clip-path: polygon(0 0, calc(100% - 24px) 0, calc(100% - 24px) 6px, calc(100% - 18px) 6px, calc(100% - 18px) 12px, calc(100% - 12px) 12px, calc(100% - 12px) 18px, calc(100% - 6px) 18px, calc(100% - 6px) 24px, 100% 24px, 100% 100%, 0 100%);
}
html body.sitio-chapin .ch-m-escalon > .ch-motif::before { left: 0; right: 0; bottom: 0; height: 14px; background: var(--ch-p-escalon) repeat-x 0 0 / 22.4px 14px; }
/* Greca en la orilla de abajo */
html body.sitio-chapin .ch-m-greca > .ch-motif::before { left: 0; right: 0; bottom: 0; height: 14px; background: var(--ch-p-greca) repeat-x 0 0 / 14px 14px; }
/* Brocado: celosía de rombos que se desvanece hacia el texto */
html body.sitio-chapin .ch-m-brocado > .ch-motif::before {
  top: 0; right: 0; bottom: 0; width: 64%;
  background: var(--ch-p-brocado) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 96%); mask-image: linear-gradient(to left, #000 30%, transparent 96%);
}
/* Faja: tira tejida a la orilla derecha */
html body.sitio-chapin .ch-m-faja > .ch-motif::before { top: 0; bottom: 0; right: 0; width: 24px; background: var(--ch-p-faja) repeat-y 0 0 / 24px 16px; }
html body.sitio-chapin .ch-m-faja > .ch-motif::after { top: 0; bottom: 0; right: 24px; width: 1px; background: rgba(255,255,255,.22); }
html body.sitio-chapin .ch-card.ch-m-faja > .ch-big { right: 40px; }
html body.sitio-chapin .ch-card.ch-m-faja > .ch-mark { right: 26px; }
html body.sitio-chapin .ch-card.ch-m-faja > .ch-body { --art-w: 46px; }
html body.sitio-chapin .ch-card.ch-m-faja > .ch-big ~ .ch-body { --art-w: 122px; }
html body.sitio-chapin .ch-card.ch-m-faja > .ch-mark ~ .ch-body { --art-w: 80px; }
/* Petate: tejido de palma, más fuerte arriba a la derecha */
html body.sitio-chapin .ch-m-petate > .ch-motif::before {
  inset: 0; background: var(--ch-p-petate) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(130% 125% at 100% 0%, #000 22%, transparent 72%); mask-image: radial-gradient(130% 125% at 100% 0%, #000 22%, transparent 72%);
}
/* Granos de maíz en la esquina */
html body.sitio-chapin .ch-m-maiz > .ch-motif::before {
  top: 0; right: 0; width: 72%; height: 86%; background: var(--ch-p-maiz) 0 0 / 16px 14px;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 28%, transparent 74%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 28%, transparent 74%);
}
/* Volcanes al fondo, abajo a la derecha */
html body.sitio-chapin .ch-m-volcanes > .ch-motif::before { right: 0; bottom: 0; width: 200px; height: 64px; background: var(--ch-p-volcanes) no-repeat 100% 100% / 200px 64px; }
/* Zigzag doble en la orilla de arriba */
html body.sitio-chapin .ch-m-zigzag > .ch-motif::before { left: 0; right: 0; top: 0; height: 11px; background: var(--ch-p-zigzag) repeat-x 0 0 / 12px 11px; }
html body.sitio-chapin .ch-card.ch-m-zigzag > .ch-body { padding-top: 20px; }
/* Cartucho: marco de bloque de glifo con un punto en cada esquina */
html body.sitio-chapin .ch-m-cartucho > .ch-motif::before { inset: 8px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 13px; }
html body.sitio-chapin .ch-m-cartucho > .ch-motif::after {
  inset: 6px;
  background: var(--ch-p-punto) no-repeat 0 0 / 6px 6px, var(--ch-p-punto) no-repeat 100% 0 / 6px 6px,
              var(--ch-p-punto) no-repeat 0 100% / 6px 6px, var(--ch-p-punto) no-repeat 100% 100% / 6px 6px;
}
html body.sitio-chapin .ch-card.ch-m-cartucho > .ch-body { padding-left: 22px; padding-top: 18px; }

/* ── 5. Puntos y pausa ─────────────────────────────────────────────────── */
html body.sitio-chapin .ch-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; padding: 0 var(--h7-x, 16px); }
html body.sitio-chapin .ch-dots { display: flex; align-items: center; }
html body.sitio-chapin .ch-nav .h7-hero-dot {
  box-sizing: content-box; width: 7px; height: 7px; padding: 0; margin: 0;
  border: 8.5px solid transparent; border-radius: 999px; background: rgba(16,24,40,.2); background-clip: padding-box;
  overflow: hidden; cursor: pointer; flex: 0 0 auto;
  transition: width .25s ease, background-color .25s ease;
}
html body.sitio-chapin .ch-nav .h7-hero-dot.is-on { width: 24px; background-color: rgba(16,24,40,.12); }
html body.sitio-chapin .ch-nav .h7-hero-dot i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--head, #101828); }
html body.sitio-chapin .ch-hero.is-paused .h7-hero-dot.is-on i { animation: none; width: 100%; }
html body.sitio-chapin .ch-nav .h7-hero-dot:focus-visible { outline: 2px solid var(--jade, #0B7A5C); outline-offset: -6px; }
html body.sitio-chapin .ch-pause {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; margin-left: 2px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line, #E6ECF4); background: #fff; color: var(--head, #101828); cursor: pointer;
}
html body.sitio-chapin .ch-pause[hidden] { display: none; }
html body.sitio-chapin .ch-pause svg { display: block; }
html body.sitio-chapin .ch-hero:not(.is-paused) .ch-play-ic,
html body.sitio-chapin .ch-hero.is-paused .ch-pause-ic { display: none; }
@media (min-width: 1024px) { html body.sitio-chapin .ch-nav { margin-top: 8px; } }

/* ── 6. «¿Tenés un negocio? Abrí tu tienda» siempre a la vista ─────────── */
html body.sitio-chapin .ch-sell {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  margin: 8px var(--h7-x, 16px) 0; padding: 10px 10px 10px 18px; border-radius: 16px;
  background: var(--card, #fff); color: var(--head, #101828); text-decoration: none;
  box-shadow: var(--sh-s, 0 1px 3px rgba(16,24,40,.1));
}
/* la faja de colores en la orilla */
html body.sitio-chapin .ch-sell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ch-faja); }
html body.sitio-chapin .ch-sell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
html body.sitio-chapin .ch-sell-txt b { font-family: var(--fd); font-weight: 800; font-size: 13.5px; line-height: 1.2; letter-spacing: -.01em; color: var(--head, #101828); }
html body.sitio-chapin .ch-sell-txt > span { font-size: 12px; line-height: 1.3; color: var(--muted, #475467); }
html body.sitio-chapin .ch-sell-more { font: inherit; color: inherit; }
html body.sitio-chapin .ch-sell-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 12px;
  background: var(--jade, #0B7A5C); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 13px; white-space: nowrap;
}
html body.sitio-chapin .ch-sell:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { html body.sitio-chapin .ch-sell:hover .ch-sell-btn { background: var(--jade-700, #086A4F); } }
html body.sitio-chapin .ch-sell-txt .ch-sell-more { display: none; }
/* teléfonos angostos: sin el glifo, para que «¿Tenés un negocio?» quepa en una línea */
@container chtop (max-width: 380px) { html body.sitio-chapin .ch-sell .ch-glyph-sell { display: none; } html body.sitio-chapin .ch-sell { padding-left: 16px; } }
@container chtop (max-width: 300px) { html body.sitio-chapin .ch-sell-txt > span { display: none; } }
@container chtop (min-width: 700px) {
  html body.sitio-chapin .ch-sell { padding: 12px 14px 12px 22px; gap: 14px; }
  html body.sitio-chapin .ch-sell-txt { flex-direction: row; align-items: baseline; gap: 8px; }
  html body.sitio-chapin .ch-sell-txt b { font-size: 15px; }
  html body.sitio-chapin .ch-sell-txt > span { font-size: 14px; }
  html body.sitio-chapin .ch-sell-txt .ch-sell-more { display: inline; }
  html body.sitio-chapin .ch-sell-btn { height: 40px; padding: 0 18px; font-size: 14px; }
}
@media (min-width: 1024px) { html body.sitio-chapin .ch-sell { margin-top: 12px; } }

/* ── 7. El glifo: el ícono dentro de un cartucho (bloque de glifo) ─────── */
html body.sitio-chapin .ch-glyph {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(255,255,255,.16); color: inherit;
}
html body.sitio-chapin .ch-glyph > svg { display: block; position: relative; z-index: 1; }
/* el marco de adentro */
html body.sitio-chapin .ch-glyph::after { content: ""; position: absolute; inset: 3px; border-radius: 10px; border: 1px solid currentColor; opacity: .38; pointer-events: none; }
/* tres puntos arriba (como el numeral 3 de un glifo) */
html body.sitio-chapin .ch-glyph::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 1px; width: 15px; height: 5px; margin-left: -7.5px;
  background: radial-gradient(circle, currentColor 1.25px, transparent 1.7px) 0 50% / 5px 5px repeat-x;
  opacity: .85; pointer-events: none;
}
html body.sitio-chapin .ch-glyph-xs { width: 18px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.2); }
html body.sitio-chapin .ch-glyph-xs::before, html body.sitio-chapin .ch-glyph-xs::after { display: none; }
html body.sitio-chapin .ch-glyph-xs > svg { width: 11px; height: 11px; }
html body.sitio-chapin .is-light .ch-glyph-xs { background: rgba(42,28,0,.12); }
html body.sitio-chapin .ch-glyph-xl { width: 76px; height: 76px; border-radius: 22px; background: rgba(255,255,255,.15); box-shadow: 0 12px 24px -14px rgba(0,0,0,.5); }
html body.sitio-chapin .ch-glyph-xl::after { inset: 5px; border-radius: 17px; border-width: 1.5px; }
html body.sitio-chapin .ch-glyph-xl::before { top: 1px; width: 22px; height: 6px; margin-left: -11px; background-size: 7.33px 6px; background-image: radial-gradient(circle, currentColor 1.8px, transparent 2.3px); }
html body.sitio-chapin .ch-glyph-xl > svg { width: 32px; height: 32px; }
html body.sitio-chapin .is-light .ch-glyph-xl { background: rgba(42,28,0,.1); }
html body.sitio-chapin .ch-glyph-head > svg { width: 21px; height: 21px; }
html body.sitio-chapin .ch-glyph-arch { width: 52px; height: 52px; border-radius: 15px; }
html body.sitio-chapin .ch-glyph-arch::after { border-radius: 12px; }
html body.sitio-chapin .ch-glyph-arch > svg { width: 24px; height: 24px; }
html body.sitio-chapin .is-light .ch-glyph-head, html body.sitio-chapin .is-light .ch-glyph-arch { background: rgba(42,28,0,.1); }
html body.sitio-chapin .ch-glyph-sell { width: 42px; height: 42px; border-radius: 13px; background: var(--jade, #0B7A5C); color: #fff; }
html body.sitio-chapin .ch-glyph-sell > svg { width: 20px; height: 20px; }

/* ── 8. Números mayas (puntos valen 1, barras valen 5) ─────────────────── */
/* Ancho fijo: los puntos y las barras salen siempre del mismo tamaño (la altura crece con los niveles) */
html body.sitio-chapin .ch-maya { display: inline-block; flex: 0 0 auto; width: 13px; height: auto; vertical-align: middle; color: inherit; }

/* ── 9. Mosaico de categorías: el color y el glifo de cada área ────────── */
html body.sitio-chapin .h7-cat.ch-cat .h7-cat-ico {
  position: relative; background: var(--c, var(--ch-jade)) !important; background-image: var(--ch-light) !important;
  color: var(--ink, #fff); box-shadow: 0 8px 16px -10px var(--c, rgba(0,0,0,.4));
}
html body.sitio-chapin .h7-cat.ch-cat .h7-cat-ico .sitio-ic { color: var(--ink, #fff); position: relative; z-index: 1; }
html body.sitio-chapin .h7-cat.ch-cat .h7-cat-ico::after { content: ""; position: absolute; inset: 3px; border-radius: 11px; border: 1px solid currentColor; opacity: .34; pointer-events: none; }
html body.sitio-chapin .h7-cat.ch-cat .h7-cat-ico::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 1px; width: 15px; height: 5px; margin-left: -7.5px;
  background: radial-gradient(circle, currentColor 1.25px, transparent 1.7px) 0 50% / 5px 5px repeat-x; opacity: .8;
}
html body.sitio-chapin .h7-cat.ch-cat .h7-cat-n { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
html body.sitio-chapin .h7-cat.ch-cat .h7-cat-n .ch-maya { width: 12px; color: var(--c, var(--ch-jade)); }
html body.sitio-chapin .h7-cat.ch-cat[style*="--ink:#2A1C00"] .h7-cat-n .ch-maya { color: #8A6200; }

/* ── 10. Encabezados de área (carruseles del inicio): un banderín escalonado ── */
html body.sitio-chapin .sitio-carousel-head.ch-area-head {
  container: chhead / inline-size;
  display: grid; grid-template-columns: auto minmax(0, max-content) minmax(10px, 1fr) auto; grid-template-rows: auto auto;
  align-items: center; gap: 0; position: relative; isolation: isolate;
  margin: 0 0 12px; color: var(--ink, #fff);
}
html body.sitio-chapin .ch-area-head > .ch-motif {
  grid-column: 1 / 3; grid-row: 1 / 3; align-self: stretch; justify-self: stretch;
  position: relative; z-index: 0; overflow: hidden; pointer-events: none;
  background-color: var(--c, var(--ch-jade)); background-image: var(--ch-light);
  border-radius: 16px 0 0 16px;
  /* la punta en escalones, como un templo visto de lado */
  clip-path: polygon(0 0, calc(100% - 16px) 0, calc(100% - 16px) 22%, calc(100% - 8px) 22%, calc(100% - 8px) 40%, 100% 40%, 100% 60%, calc(100% - 8px) 60%, calc(100% - 8px) 78%, calc(100% - 16px) 78%, calc(100% - 16px) 100%, 0 100%);
}
html body.sitio-chapin .ch-area-head > .ch-glyph-head { grid-column: 1; grid-row: 1 / 3; margin: 10px 11px 10px 10px; z-index: 1; }
html body.sitio-chapin .ch-area-head > .sitio-carousel-title {
  grid-column: 2; grid-row: 1; align-self: end; position: relative; z-index: 1; margin: 11px 30px 0 0;
  display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; text-overflow: clip; color: var(--ink, #fff) !important;
  font-size: 16.5px; line-height: 1.16; letter-spacing: -.02em;
}
html body.sitio-chapin .ch-area-head > .ch-head-sub {
  grid-column: 2; grid-row: 2; align-self: start; position: relative; z-index: 1; margin: 3px 30px 11px 0; min-width: 0;
  display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.94);
  font-family: var(--fb); font-weight: 600; font-size: 12px; line-height: 1.3;
}
html body.sitio-chapin .ch-area-head.is-light > .ch-head-sub { color: rgba(42,28,0,.84); }
html body.sitio-chapin .ch-head-hint { display: none; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.sitio-chapin .ch-head-n { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap; }
html body.sitio-chapin .ch-head-n .ch-maya { width: 13px; }
html body.sitio-chapin .ch-area-head > .sitio-carousel-cta {
  grid-column: 4; grid-row: 1 / 3; align-self: center;
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px;
  background: #fff; color: var(--cta-ink, var(--c, var(--ch-jade))); border: 1px solid var(--line, #E6ECF4);
  font-family: var(--fd); font-weight: 800; font-size: 12px; box-shadow: var(--sh-s, none);
}
html body.sitio-chapin .ch-area-head.is-light { --cta-ink: #7A5300; }
html body.sitio-chapin .ch-area-head.is-light > .ch-motif::before,
html body.sitio-chapin .ch-area-head.is-light > .ch-motif::after { filter: invert(1); opacity: .6; }
@container chhead (min-width: 560px) {
  html body.sitio-chapin .ch-head-hint { display: block; flex: 0 1 auto; }
  html body.sitio-chapin .ch-head-n { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.4); }
  html body.sitio-chapin .ch-area-head.is-light .ch-head-n { border-left-color: rgba(42,28,0,.3); }
}
@media (min-width: 1024px) {
  html body.sitio-chapin .sitio-carousel-head.ch-area-head { margin-bottom: 14px; }
  html body.sitio-chapin .ch-area-head > .sitio-carousel-title { font-size: 19px; }
  html body.sitio-chapin .ch-area-head > .ch-glyph-head { width: 48px; height: 48px; margin: 11px 12px 11px 11px; }
  html body.sitio-chapin .ch-area-head > .ch-head-sub { font-size: 13px; }
  html body.sitio-chapin .ch-area-head > .sitio-carousel-cta { height: 36px; padding: 0 16px; font-size: 13px; }
  html body.sitio-chapin .sitio-home-carousel:has(> .ch-area-head) .sitio-carousel-arrow { top: calc(50% + 40px); }
}
/* Motivos dentro del banderín */
html body.sitio-chapin .ch-area-head.ch-m-escalon > .ch-motif::before,
html body.sitio-chapin .ch-arch.ch-m-escalon > .ch-motif::before { left: 0; right: 0; bottom: 0; height: 11px; background: var(--ch-p-escalon) repeat-x 0 0 / 17.6px 11px; }
html body.sitio-chapin .ch-area-head.ch-m-greca > .ch-motif::before,
html body.sitio-chapin .ch-arch.ch-m-greca > .ch-motif::before { left: 0; right: 0; bottom: 0; height: 11px; background: var(--ch-p-greca) repeat-x 0 0 / 11px 11px; }
html body.sitio-chapin .ch-area-head.ch-m-brocado > .ch-motif::before,
html body.sitio-chapin .ch-arch.ch-m-brocado > .ch-motif::before {
  top: 0; right: 0; bottom: 0; width: 70%; background: var(--ch-p-brocado) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 95%); mask-image: linear-gradient(to left, #000 25%, transparent 95%);
}
html body.sitio-chapin .ch-area-head.ch-m-faja > .ch-motif::before { top: 0; bottom: 0; right: 22px; width: 20px; background: var(--ch-p-faja) repeat-y 0 0 / 20px 13.33px; }
html body.sitio-chapin .ch-arch.ch-m-faja > .ch-motif::before { top: 0; bottom: 0; right: 28px; width: 24px; background: var(--ch-p-faja) repeat-y 0 0 / 24px 16px; }
html body.sitio-chapin .ch-area-head.ch-m-faja > .sitio-carousel-title,
html body.sitio-chapin .ch-area-head.ch-m-faja > .ch-head-sub { margin-right: 52px; }
html body.sitio-chapin .ch-area-head.ch-m-petate > .ch-motif::before,
html body.sitio-chapin .ch-arch.ch-m-petate > .ch-motif::before {
  inset: 0; background: var(--ch-p-petate) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 85%); mask-image: linear-gradient(to left, #000 20%, transparent 85%);
}
html body.sitio-chapin .ch-area-head.ch-m-maiz > .ch-motif::before,
html body.sitio-chapin .ch-arch.ch-m-maiz > .ch-motif::before {
  top: 0; right: 0; bottom: 0; width: 60%; background: var(--ch-p-maiz) 0 0 / 14px 12.25px;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 92%); mask-image: linear-gradient(to left, #000 25%, transparent 92%);
}
html body.sitio-chapin .ch-area-head.ch-m-volcanes > .ch-motif::before { right: 14px; bottom: 0; width: 140px; height: 45px; background: var(--ch-p-volcanes) no-repeat 100% 100% / 140px 45px; }
html body.sitio-chapin .ch-arch.ch-m-volcanes > .ch-motif::before { right: 0; bottom: 0; width: 240px; height: 77px; background: var(--ch-p-volcanes) no-repeat 100% 100% / 240px 77px; }
html body.sitio-chapin .ch-area-head.ch-m-zigzag > .ch-motif::before,
html body.sitio-chapin .ch-arch.ch-m-zigzag > .ch-motif::before { left: 0; right: 0; top: 0; height: 9px; background: var(--ch-p-zigzag) repeat-x 0 0 / 10px 9.17px; }
html body.sitio-chapin .ch-area-head.ch-m-cartucho > .ch-motif::before { top: 5px; bottom: 5px; left: 5px; right: 22px; border: 1.5px solid rgba(255,255,255,.3); border-right: 0; border-radius: 12px 0 0 12px; }
html body.sitio-chapin .ch-arch.ch-m-cartucho > .ch-motif::before { inset: 7px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 15px; }
html body.sitio-chapin .ch-arch.ch-m-cartucho > .ch-motif::after {
  inset: 5px;
  background: var(--ch-p-punto) no-repeat 0 0 / 6px 6px, var(--ch-p-punto) no-repeat 100% 0 / 6px 6px,
              var(--ch-p-punto) no-repeat 0 100% / 6px 6px, var(--ch-p-punto) no-repeat 100% 100% / 6px 6px;
}

/* ── 11. Arriba de la tienda, de una categoría o de una búsqueda ───────── */
html body.sitio-chapin .ch-arch {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 14px; min-height: 86px;
  padding: 16px var(--gut, 16px) 20px; border-radius: 0 0 22px 22px;
  background-color: var(--c, var(--ch-anil)); background-image: var(--ch-light);
  color: var(--ink, #fff);
}
html body.sitio-chapin .ch-arch > .ch-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html body.sitio-chapin .ch-arch > .ch-glyph { z-index: 1; }
html body.sitio-chapin .ch-arch-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
html body.sitio-chapin .ch-arch .ch-arch-t { margin: 0; color: inherit !important; font-family: var(--fd); font-weight: 800; font-size: 21px; line-height: 1.12; letter-spacing: -.022em; overflow-wrap: anywhere; }
html body.sitio-chapin .ch-arch-s .ch-maya { width: 14px; }
html body.sitio-chapin .ch-arch-s { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fb); font-weight: 600; font-size: 12.5px; color: rgba(255,255,255,.94); }
html body.sitio-chapin .ch-arch.is-light .ch-arch-s { color: rgba(42,28,0,.84); }
html body.sitio-chapin .ch-arch.is-light > .ch-motif::before,
html body.sitio-chapin .ch-arch.is-light > .ch-motif::after { filter: invert(1); opacity: .6; }
@media (min-width: 769px) {
  /* En la computadora, un banderín del ancho de su texto con la punta en escalones (como los del inicio) */
  html body.sitio-chapin .ch-arch {
    margin-top: 16px; width: -moz-fit-content; width: fit-content; max-width: 100%; min-width: min(420px, 100%);
    border-radius: 22px 0 0 22px; padding: 22px 64px 24px 28px; min-height: 104px; gap: 18px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, calc(100% - 24px) 22%, calc(100% - 12px) 22%, calc(100% - 12px) 40%, 100% 40%, 100% 60%, calc(100% - 12px) 60%, calc(100% - 12px) 78%, calc(100% - 24px) 78%, calc(100% - 24px) 100%, 0 100%);
  }
  html body.sitio-chapin .ch-arch.ch-m-faja > .ch-motif::before { right: 34px; }
  html body.sitio-chapin .ch-arch .ch-arch-t { font-size: 28px; }
  html body.sitio-chapin .ch-arch-s { font-size: 14px; }
  html body.sitio-chapin .ch-arch > .ch-glyph-arch { width: 60px; height: 60px; border-radius: 17px; }
  html body.sitio-chapin .ch-arch > .ch-glyph-arch > svg { width: 28px; height: 28px; }
}

/* ── 12. El punto de «.gt»: un rombo tejido ────────────────────────────── */
html body.sitio-chapin .sitio-logo-tld { white-space: nowrap; }
html body.sitio-chapin .sitio-logo-pt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html body.sitio-chapin .sitio-logo-dot { display: inline-block !important; width: 7px; height: 7px; margin: 0 1px 0 2px; vertical-align: baseline; }

/* ── 13. El ∞ de la carga cambia de color: todas las posibilidades ─────── */
@media (prefers-reduced-motion: no-preference) {
  html body.sitio-chapin #sitio-nav-load .snl-run { animation: snl-run 1.2s linear infinite, ch-inf 6s linear infinite; }
}
@keyframes ch-inf {
  0%, 100% { stroke: #0B7A5C; }
  20% { stroke: #D9A21A; }
  40% { stroke: #B83A1B; }
  60% { stroke: #A3194B; }
  80% { stroke: #27348B; }
}

/* ── 14. Menos movimiento ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body.sitio-chapin .ch-track { scroll-behavior: auto; }
  html body.sitio-chapin .ch-track > .ch-card, html body.sitio-chapin .ch-sell, html body.sitio-chapin .ch-cta svg { transition: none; transform: none !important; }
  html body.sitio-chapin .ch-nav .h7-hero-dot { transition: none; }
}