/* ============================================================================
   SECCIÓN · ENCAJE ("¿Para quién?") — tono claro/cálido
   Tabla SÍ / NO: dos columnas (encaja sí · no encaja). Mobile-first.
   Solo vars de tokens.css. Selectores prefijados .sec-encaje.
   ============================================================================ */

.sec-encaje .s-head { margin-bottom: clamp(40px, 7vw, 64px); }

/* ---- Tabla SÍ/NO ---- */
.sec-encaje .encaje-table {
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

.sec-encaje .encaje-col {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 6vw, 40px);
  box-shadow: var(--shadow-sm);
}

/* La columna "encaja sí" lleva el único acento rojo del bloque */
.sec-encaje .encaje-col--yes {
  border-color: var(--red-line);
  box-shadow: var(--shadow);
}

/* ---- Cabecera de columna: tag SÍ/NO ---- */
.sec-encaje .encaje-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.sec-encaje .encaje-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sec-encaje .encaje-col--yes .encaje-tag {
  color: var(--red);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
}
.sec-encaje .encaje-col--yes .encaje-tag .dot { background: var(--red); }

.sec-encaje .encaje-col--no .encaje-tag {
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.sec-encaje .encaje-col--no .encaje-tag .dot { background: var(--text-dim); }

.sec-encaje .encaje-col h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-6);
}
.sec-encaje .encaje-col--no h3 { color: var(--text); }

/* ---- Listas con ✓ / ✗ ---- */
.sec-encaje .encaje-list {
  display: grid;
  gap: var(--s-5);
}
.sec-encaje .encaje-list li {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
}
.sec-encaje .encaje-list li strong {
  color: var(--text-strong);
  font-weight: 700;
}

/* Marca de cada ítem: disco + glifo */
.sec-encaje .encaje-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.sec-encaje .encaje-list li::after {
  content: "";
  position: absolute;
}

/* ✓ — columna SÍ (acento rojo) */
.sec-encaje .encaje-col--yes .encaje-list li::before {
  background: var(--red-tint);
  border: 1px solid var(--red-line);
}
.sec-encaje .encaje-col--yes .encaje-list li::after {
  left: 7px;
  top: 6.5px;
  width: 6px;
  height: 9px;
  border: solid var(--red);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ✗ — columna NO (gris neutro, sin acento) */
.sec-encaje .encaje-col--no .encaje-list li {
  color: var(--text-dim);
}
.sec-encaje .encaje-col--no .encaje-list li strong {
  color: var(--text);
}
.sec-encaje .encaje-col--no .encaje-list li::before {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}
.sec-encaje .encaje-col--no .encaje-list li::after {
  left: 7px;
  top: 7px;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.6px 100% no-repeat;
  color: var(--text-dim);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* ---- Tablet/desktop: dos columnas reales ---- */
@media (min-width: 768px) {
  .sec-encaje .encaje-table {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .sec-encaje .encaje-table { gap: var(--s-6); }
  .sec-encaje .encaje-col { padding: clamp(40px, 3.4vw, 48px); }
}