/* Modal container polish (scoped to our modal only) */
#contentModalOverlay[data-qs-modal="true"] { opacity: 0; transition: opacity .18s ease; }
#contentModal[data-qs-modal="true"] { opacity: 0; transition: opacity .18s ease; }
#contentModalCard[data-qs-modal="true"] { will-change: transform; transform: scale(.985); transition: transform .20s ease; }
#contentModalHeader[data-qs-modal="true"] { backdrop-filter: saturate(140%) blur(2px); -webkit-backdrop-filter: saturate(140%) blur(2px); }
#contentModalTitle[data-qs-modal="true"] { letter-spacing: .2px; }
#contentModalBody[data-qs-modal="true"] { text-align: justify; }

/* Scoped styles for modal content to avoid relying on DB Tailwind classes */
#contentModalBody .qs-about {
  color: #0f172a;
  line-height: 1.7;
  font-size: 16.5px;
  text-align: justify;
}
#contentModalBody .qs-about * { box-sizing: border-box; }
#contentModalBody .qs-about p { margin: 0 0 12px 0; }
#contentModalBody .qs-about h3, 
#contentModalBody .qs-about h4 { color:#0f172a; margin: 0 0 10px 0; font-weight: 800; letter-spacing: .2px; }
#contentModalBody .qs-about h3 { font-size: 20px; }
#contentModalBody .qs-about h4 { font-size: 18px; }
#contentModalBody .qs-about section {
  margin: 0 0 20px 0;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #14b8a6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(2,6,23,.04);
}
#contentModalBody .qs-about section[data-type="vision"] { border-left-color: #38bdf8; /* sky-400 */ }
#contentModalBody .qs-about section[data-type="valores"] { border-left-color: #3b82f6; /* blue-500 */ }

/* Soft tinted backgrounds by section type for better differentiation */
#contentModalBody .qs-about section[data-type="mision"] {
  background: linear-gradient(0deg, rgba(20,184,166,.04), rgba(20,184,166,.04)), #ffffff;
}
#contentModalBody .qs-about section[data-type="vision"] {
  background: linear-gradient(0deg, rgba(56,189,248,.06), rgba(56,189,248,.06)), #ffffff;
}
#contentModalBody .qs-about section[data-type="valores"] {
  background: linear-gradient(0deg, rgba(59,130,246,.06), rgba(59,130,246,.06)), #ffffff;
}
#contentModalBody .qs-about section[data-type="valores"] { padding: 18px 18px; }

#contentModalBody .qs-about section h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Narrative aesthetics for "Nuestra Historia" */
#contentModalBody .qs-about article { max-width: 72ch; margin: 4px auto 0 auto; }
#contentModalBody .qs-about article::before {
  content: "";
  display: block;
  width: 64px; height: 4px;
  background: #14b8a6; /* teal-500 */
  border-radius: 9999px;
  margin: 6px auto 16px auto;
  opacity: .9;
}
#contentModalBody .qs-about article > p:first-of-type {
  font-size: 18px;
  color: #334155; /* slate-700 */
  margin-bottom: 14px;
}
#contentModalBody .qs-about article p + p { margin-top: 6px; }
#contentModalBody .qs-about article img { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 12px 0; }
#contentModalBody .qs-about article blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #94a3b8; color: #334155; background: #f8fafc; border-radius: 8px; }

/* Lists */
#contentModalBody .qs-about ul { list-style: none; padding: 0; margin: 10px 0 0 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) {
  #contentModalBody .qs-about ul { grid-template-columns: 1fr 1fr; }
}
#contentModalBody .qs-about li { display: flex; align-items: flex-start; gap: 10px; color: #334155; }
#contentModalBody .qs-about li i[class*="fa"] { color: #0ea5a6; margin-top: 2px; }

/* Valores en una sola columna (igual que Misión y Visión) */
#contentModalBody .qs-about section[data-type="valores"] ul { grid-template-columns: 1fr; gap: 16px; justify-items: stretch; align-items: start; }
@media (min-width: 1024px) {
  #contentModalBody .qs-about section[data-type="valores"] ul { grid-template-columns: 1fr; }
}
#contentModalBody .qs-about section[data-type="valores"] li {
  display: block;
  line-height: 1.7;
  width: 100%;
}
#contentModalBody .qs-about section[data-type="valores"] li > * { min-width: 0; }
#contentModalBody .qs-about section[data-type="valores"] li * { max-width: 100%; }
#contentModalBody .qs-about section[data-type="valores"] li i[class*="fa"] {
  display: inline-block;
  width: auto;
  margin-right: 8px;
  margin-top: 2px;
}

/* Inside the content column (2nd col), split into two: label (narrow) + description (wide) */
#contentModalBody .qs-about section[data-type="valores"] li > [data-valor-content] {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
  align-items: start;
}
#contentModalBody .qs-about section[data-type="valores"] li > [data-valor-content] > strong {
  grid-column: 1;
  margin: 0;
  font-weight: 800;
}
#contentModalBody .qs-about section[data-type="valores"] li > [data-valor-content] > :not(strong) {
  grid-column: 1;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Allow stacking on small screens */
@media (max-width: 480px) {
  /* Ya es vertical por defecto; no se requieren cambios específicos */
}

/* Asegurar que el LI no justifique el label; solo la descripción lo hace */
#contentModalBody .qs-about section[data-type="valores"] li { text-align: initial; }

/* Icon badges when present */
#contentModalBody .qs-about .icon-badge {
  width: 36px; height: 36px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #d1fae5; color: #0f766e; margin-right: 10px;
}

/* Simple cards (if needed in future) */
#contentModalBody .qs-about .qs-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }