/* ============================================================
   Jativa Branding — CSS de marca para cursos del LMS
   Fuente de verdad del diseño: OneDrive/Cursos/_plantillas/leccion-template-pler-smile.html
   Prefijos por marca:
     .ps-*  Pler Smile (teal #2B4A5A / beige #F4EEE3)  — definidas abajo
     .pc-*  Pler Clinics (olive #3C3F20 + brown #452B24 / beige) — FUTURO, no definir aún
     .nf-*  New Face MD (navy #003366 + blue #2D99CD) — FUTURO, no definir aún
   ============================================================ */

@font-face {
  font-family: 'Italiana';
  src: url('/assets/jativa_branding/fonts/italiana.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/jativa_branding/fonts/glacial-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/jativa_branding/fonts/glacial-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ---------- Pler Smile (.ps-*) ---------- */

.ps-page {
  font-family: 'Glacial Indifference', sans-serif;
  font-weight: 400;
  color: #111314;
  line-height: 1.7;
  max-width: 860px;
  margin: 0 auto 40px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(17, 19, 20, 0.10);
  border: 1px solid #EEE9DD;
}
.ps-page b, .ps-page strong { font-weight: 700; }

.ps-band {
  background: linear-gradient(115deg, #1E3641 0%, #2B4A5A 55%, #3D6275 100%);
  color: #fff;
  padding: 36px 48px 40px;
  text-align: center;
}
.ps-band-logo { height: 64px; margin-bottom: 14px; }
.ps-kicker {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #CFE0E8;
  margin-bottom: 12px;
  font-weight: 700;
}
.ps-h1 {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.04em;
  word-spacing: 0.12em;
  line-height: 1.35;
  color: #fff;
  margin: 0;
}
.ps-sub { margin-top: 10px; color: #D8E4EA; font-size: 16px; }

.ps-body { padding: 40px 48px; }

.ps-def { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 8px; }
.ps-dot {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  background: #F4EEE3; border: 1px solid #E6DCC9;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ps-h2 { font-weight: 700; color: #2B4A5A; font-size: 20px; margin: 0 0 6px; letter-spacing: 0.01em; }
.ps-def p { font-size: 16px; margin: 0; }

.ps-beige { background: #F4EEE3; margin: 32px -48px; padding: 34px 48px; }
.ps-h3 {
  text-align: center; font-weight: 700; color: #2B4A5A; font-size: 18px;
  letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 22px;
}
.ps-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ps-card { background: #fff; border: 1px solid #E8E2D5; border-radius: 12px; padding: 20px; text-align: center; }
.ps-card b { display: block; color: #2B4A5A; font-size: 15.5px; margin-bottom: 8px; }
.ps-card p { font-size: 14px; color: #4a4d4f; margin: 0; }

.ps-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.ps-num { background: #fff; border: 1px solid #E8E2D5; border-radius: 10px; padding: 16px 18px; font-size: 14.5px; }
.ps-num .ps-n { color: #2B4A5A; font-weight: 700; margin-right: 8px; }

.ps-nutshell {
  border-left: 4px solid #2B4A5A; background: #F0F4F6;
  border-radius: 0 12px 12px 0; padding: 22px 26px; margin-top: 30px;
}
.ps-nutshell .ps-t { color: #2B4A5A; font-weight: 700; margin-bottom: 6px; }
.ps-nutshell b { color: #1E3641; }

.ps-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.ps-good, .ps-bad { border-radius: 12px; padding: 18px 20px; font-size: 14.5px; }
.ps-good { background: #EEF4EF; border: 1px solid #CBDACD; }
.ps-bad { background: #F7EEEC; border: 1px solid #E3CFC9; }
.ps-good b { color: #5A7A5F; }
.ps-bad b { color: #9C5548; }

.ps-quiz-q {
  background: #FAFAFC; border: 1px solid #DCDCDC; border-radius: 12px;
  padding: 20px 22px; margin-top: 14px;
}
.ps-quiz-q .ps-q { font-weight: 700; margin-bottom: 12px; }

.ps-foot {
  border-top: 1px solid #EEE9DD; background: #FBFAF7;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; font-size: 12.5px; color: #8a8a84; letter-spacing: 0.06em;
}
.ps-foot img { height: 26px; opacity: 0.85; }

@media (max-width: 640px) {
  .ps-body { padding: 28px 22px; }
  .ps-beige { margin: 26px -22px; padding: 26px 22px; }
  .ps-nums, .ps-duo { grid-template-columns: 1fr; }
  .ps-band { padding: 28px 22px 32px; }
  .ps-h1 { font-size: 22px; }
}

/* ---------- Pler Clinics (.pc-*): pendiente — olive #3C3F20 + brown #452B24 / beige #F4EEE3 ---------- */
/* ---------- New Face MD (.nf-*): pendiente — navy #003366 + blue #2D99CD, Questrial/Montserrat ---------- */

/* ============================================================
   .jh-*  Cursos genéricos de industria (sin marca)
   Paleta neutra: charcoal #24272A · gris medio #5E6163 ·
   gris claro #B9BCBE · superficie #F5F6F7 · blanco #FFFFFF
   Tipografía: Montserrat (títulos 700-800, tracking negativo;
   etiquetas en mayúscula con tracking amplio).
   SIN logo: el hero abre con un kicker tipográfico.
   ============================================================ */

@font-face { font-family: 'Montserrat'; src: url('/assets/jativa_branding/fonts/montserrat-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/jativa_branding/fonts/montserrat-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/jativa_branding/fonts/montserrat-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/jativa_branding/fonts/montserrat-extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

.jh-page {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: #24272A;
  line-height: 1.7;
  max-width: 860px;
  margin: 0 auto 40px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(36, 39, 42, 0.10);
  border: 1px solid #E1E3E5;
}
.jh-page b, .jh-page strong { font-weight: 700; }

.jh-band {
  background: linear-gradient(115deg, #1A1C1E 0%, #24272A 55%, #3A3E42 100%);
  color: #fff;
  padding: 36px 48px 40px;
  text-align: center;
}
.jh-band-kicker {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #B9BCBE;
  font-weight: 700;
  margin-bottom: 16px;
}
.jh-kicker {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B9BCBE;
  margin-bottom: 12px;
  font-weight: 600;
}
.jh-h1 {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.jh-sub { margin-top: 12px; color: #B9BCBE; font-size: 16px; font-weight: 400; }

.jh-body { padding: 40px 48px; }

.jh-def { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 8px; }
.jh-dot {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  background: #F5F6F7; border: 1px solid #E1E3E5;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.jh-h2 { font-weight: 700; color: #24272A; font-size: 20px; margin: 0 0 6px; letter-spacing: -0.015em; }
.jh-def p { font-size: 16px; margin: 0; }

.jh-surface { background: #F5F6F7; margin: 32px -48px; padding: 34px 48px; }
.jh-h3 {
  text-align: center; font-weight: 700; color: #24272A; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 22px;
}
.jh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.jh-card { background: #fff; border: 1px solid #E1E3E5; border-radius: 12px; padding: 20px; text-align: center; }
.jh-card b { display: block; color: #24272A; font-size: 15.5px; margin-bottom: 8px; }
.jh-card p { font-size: 14px; color: #5E6163; margin: 0; }

.jh-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.jh-num { background: #fff; border: 1px solid #E1E3E5; border-radius: 10px; padding: 16px 18px; font-size: 14.5px; }
.jh-num .jh-n { color: #24272A; font-weight: 800; margin-right: 8px; }

.jh-nutshell {
  border-left: 4px solid #24272A; background: #F5F6F7;
  border-radius: 0 12px 12px 0; padding: 22px 26px; margin-top: 30px;
}
.jh-nutshell .jh-t { color: #24272A; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; }
.jh-nutshell b { color: #1A1C1E; }

.jh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.jh-good, .jh-bad { border-radius: 12px; padding: 18px 20px; font-size: 14.5px; }
.jh-good { background: #F2F5F3; border: 1px solid #CFD9D2; }
.jh-bad { background: #F7F3F2; border: 1px solid #DFCFCB; }
.jh-good b { color: #4C6B54; }
.jh-bad b { color: #8C5145; }

.jh-quiz-q {
  background: #FAFBFB; border: 1px solid #E1E3E5; border-radius: 12px;
  padding: 20px 22px; margin-top: 14px;
}
.jh-quiz-q .jh-q { font-weight: 700; margin-bottom: 12px; }
.jh-opt { font-size: 14.5px; color: #5E6163; margin: 4px 0; }

.jh-foot {
  border-top: 1px solid #E1E3E5; background: #F5F6F7;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; font-size: 11px; color: #5E6163;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}

@media (max-width: 640px) {
  .jh-body { padding: 28px 22px; }
  .jh-surface { margin: 26px -22px; padding: 26px 22px; }
  .jh-nums, .jh-duo { grid-template-columns: 1fr; }
  .jh-band { padding: 28px 22px 32px; }
  .jh-h1 { font-size: 23px; }
}