/* ═══════════════════════════════════════════════════════════════
   EduSync — landing v2
   Hoja única de la landing nueva y de sus páginas internas
   (modulos, preguntas, privacidad-y-datos, bitacora-sep).

   Reglas de la especificación que esta hoja hace cumplir:
   - un solo acento (naranja): CTA primaria, hover de enlaces, dos resaltes
   - íconos siempre en --text o --text-3
   - sin translateY en hover, sin gradientes, sin backdrop-filter
   - una sola sombra: la del marco de navegador del hero
   - eyebrow en mayúsculas solo en hero, producto y bitácora
   - oscuro por tokens, NO por el filtro de inversión de dark-mode.css
   ═══════════════════════════════════════════════════════════════ */

:root {
  --orange-500: #E67E22;
  --orange-600: #cf6d17;
  --brown-900:  #2a2622;
  --brown-700:  #5D4037;
  --bg:         #fbfaf8;
  --bg-alt:     #f3efe9;
  --surface:    #ffffff;
  --line:       #d9d4cc;
  --line-soft:  #e6e1da;
  --text:       #2a2622;
  --text-2:     #5f5951;
  --text-3:     #7a746c;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;
  --radius-ctl: 6px;
  --container: 1120px;
  --section-y: 88px;
  --nav-h: 72px;
  /* Sombra única permitida: el marco del hero */
  --shadow-frame: 0 12px 32px rgba(42, 38, 34, .12);
}

[data-theme="dark"] {
  --bg: #1c1917;
  --bg-alt: #231f1c;
  --surface: #2a2622;
  --line: #3d3733;
  --line-soft: #34302c;
  --text: #f5f1ec;
  --text-2: #cfc8bf;
  --text-3: #9a938a;
  --shadow-frame: 0 12px 32px rgba(0, 0, 0, .45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange-500); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible en todo control (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h3 { font-size: 24px; font-weight: 700; line-height: 1.25; }
h4 { font-size: 18px; font-weight: 700; line-height: 1.3; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--bg-alt); }

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.lead { font-size: 18px; color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: 13px; color: var(--text-3); }
.link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.link:hover { color: var(--orange-500); text-decoration-color: currentColor; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-ctl);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--orange-500); color: #fff; border-color: var(--orange-500); }
.btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); color: #fff; }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn--secondary:hover { background: var(--text); color: var(--bg); }
.btn--sm { padding: 8px 14px; font-size: 14px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  flex-shrink: 0;
}
.nav__brand:hover { color: var(--text); }
.nav__brand img { width: 32px; height: 32px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.nav__links a:hover { color: var(--orange-500); }
.nav__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav__login { font-size: 15px; font-weight: 500; color: var(--text-2); }
.nav__burger { display: none; }
.nav__demo-corto { display: none; }
@media (max-width: 899px) { .nav__demo-largo { display: none; } .nav__demo-corto { display: inline; } }

/* Toggle de tema: misma cookie y atributo que el resto del sitio (theme.js) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--text); }
.theme-toggle .ico--sun { display: none; }
[data-theme="dark"] .theme-toggle .ico--moon { display: none; }
[data-theme="dark"] .theme-toggle .ico--sun { display: block; }
.nav__burger .ico--close { display: none; }
.nav__burger.is-open .ico--menu { display: none; }
.nav__burger.is-open .ico--close { display: block; }

/* Cajón móvil */
.nav__drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 20px 20px;
}
.nav__drawer.is-open { display: block; }
.nav__drawer a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.nav__drawer a:last-child { border-bottom: 0; }

/* ---------- Marco de captura (iframes reales del sistema) ----------
   El iframe se renderiza al ancho real de la captura (data-w) y se encoge
   con transform:scale para caber en su contenedor; landing-v2.js calcula
   la escala. pointer-events:none: es una vitrina, no se navega. */
.shot {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shot__viewport { position: relative; overflow: hidden; }
.shot__viewport iframe {
  max-width: none; /* el ancho lo fija el JS al de la captura (data-w) */
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
}
.shot img { width: 100%; height: auto; }

/* Marco de navegador (hero): la única sombra de la página */
.browser { box-shadow: var(--shadow-frame); }
.browser__bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.browser__url { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); }

/* Teléfono mínimo: borde, sin barra de estado falsa */
.phone {
  width: 300px;
  height: 560px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
}
.producto__row .phone .shot__viewport { width: 300px; height: 560px; }

/* Oscuro: la captura se invierte junto con la página; sus fotos las
   re-invierte el CSS que ya lleva cada captura cuando el JS le pone
   la clase .demo-oscuro al documento (mismo origen). */
[data-theme="dark"] .shot__viewport iframe { filter: invert(0.9) hue-rotate(180deg) saturate(1.3); }

/* Captura pendiente (solo mientras no exista el PNG real de la IA) */
.shot--pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  color: var(--text-3);
  font-size: 14px;
  border-style: dashed;
}

/* ---------- 1 · Hero ---------- */
.hero { padding: 96px 0 80px; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 28px; max-width: 520px; }
.hero__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero__shot .shot__viewport { height: 420px; }

/* ---------- 2 · Problema ---------- */
.problema { padding: 72px 0; }
.problema__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.problema__text p + p { margin-top: 16px; }
.quote {
  margin: 28px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--text);
}
.quote p { font-size: 17px; font-style: italic; }
.quote .small { margin-top: 8px; font-style: normal; }

/* ---------- 3 · Producto ---------- */
.producto__head { max-width: 640px; margin-bottom: 64px; }
.producto__rows { display: grid; gap: 96px; }
.producto__row { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.producto__row--flip { grid-template-columns: 5fr 7fr; }
.producto__row--flip .producto__text { order: -1; }
.producto__row h3 { margin-bottom: 14px; }
.producto__row p { color: var(--text-2); }
.producto__row .shot__viewport { height: 400px; }
.producto__row--ia .shot__viewport { height: 380px; }
.pasos { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.pasos li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pasos__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}
.producto__mas { margin-top: 64px; text-align: center; }
.producto__mas a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 4 · Bitácora ---------- */
.bitacora__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bitacora h2 { margin-bottom: 18px; }
.bitacora p { color: var(--text-2); margin-bottom: 22px; }
.tabla-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 24px;
}
.tabla-card table { width: 100%; border-collapse: collapse; }
.tabla-card th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--line);
}
.tabla-card td { padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; vertical-align: top; }
.tabla-card td + td, .tabla-card th + th { padding-left: 24px; }
.tabla-card tr:last-child td { border-bottom: 0; }
.tabla-card .tachado { color: var(--text-3); text-decoration: line-through; }

/* ---------- 5 · Precios ---------- */
.precios__head { max-width: 680px; margin-bottom: 40px; }
.precios__head p { color: var(--text-2); margin-top: 14px; }
.fundadores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  margin-bottom: 32px;
}
.fundadores h3 { font-size: 18px; }
.fundadores .small { margin-top: 4px; }

.plan-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.plan-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plan-table col.c-feat { width: 45.45%; }
.plan-table col.c-plan { width: 27.27%; }
.plan-table th, .plan-table td { padding: 16px 24px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.plan-table th { text-align: left; font-weight: 400; }
.plan-table th.plan { text-align: center; }
.plan-table td.val { text-align: center; color: var(--text-3); font-size: 15px; }
.plan-table .col-completo { background: var(--bg-alt); }
.plan-table tr:last-child td { border-bottom: 0; }
.plan-table tr.total td { font-weight: 700; color: var(--text); }
.plan__name { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.plan__price { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; }
.plan__unit { display: block; font-size: 13px; color: var(--text-3); margin-top: 4px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.condiciones { margin: 20px 0 48px; line-height: 1.6; }

/* Calculadora */
.calc {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.calc h3 { font-size: 22px; margin-bottom: 10px; }
.calc__intro p { font-size: 15px; color: var(--text-2); }
.calc__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--surface);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--text); outline: none; }
.calc__out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.calc__out .small { display: block; margin-bottom: 4px; }
.calc__out strong { font-size: 18px; }
.calc__nota { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ---------- 6 · Fundador ---------- */
.fundador__grid { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center; }
.fundador__foto { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); }
.fundador h2 { font-size: 28px; margin-bottom: 14px; }
.fundador p { color: var(--text-2); margin-bottom: 18px; }
.fundador .small { margin-left: 16px; }

/* ---------- 7 · FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq h2 { margin-bottom: 14px; }
.faq__intro p { color: var(--text-2); margin-bottom: 16px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq details:first-child { border-top: 1px solid var(--line-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { font-size: 18px; color: var(--text); flex-shrink: 0; }
.faq details[open] summary i::before { content: "\ea13"; } /* ri-subtract-line */
.faq details p { padding: 0 0 20px; color: var(--text-2); max-width: 640px; }

/* ---------- 8 · Contacto ---------- */
.contacto { background: var(--brown-900); color: var(--bg); }
[data-theme="dark"] .contacto { background: #141110; }
.contacto__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.contacto h2 { color: #fbfaf8; margin-bottom: 16px; }
.contacto__intro p { color: #cfc8bf; margin-bottom: 24px; }
.contacto__intro .small { color: #9a938a; margin-top: 14px; }
.form-card {
  background: var(--bg);
  color: var(--text);
  padding: 28px;
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-card .span2 { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--orange-500); }
.check a { text-decoration: underline; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { grid-column: 1 / -1; font-size: 14px; min-height: 1.2em; }
.form-msg.ok { color: var(--text); font-weight: 600; }
.form-msg.err { color: var(--orange-600); }

/* ---------- Footer ---------- */
.footer {
  background: var(--brown-900);
  color: #cfc8bf;
  border-top: 1px solid #4a443d;
  padding: 28px 0;
  font-size: 13px;
}
[data-theme="dark"] .footer { background: #141110; }
.footer__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 8px; flex-wrap: wrap; }
.footer__links a { color: #cfc8bf; }
.footer__links a:hover { color: var(--orange-500); }
.footer__links span { color: #6f6961; }

/* ---------- Páginas internas ---------- */
.page { padding: 64px 0 var(--section-y); }
.page__head { max-width: 680px; margin-bottom: 48px; }
.page__head p { color: var(--text-2); margin-top: 14px; font-size: 18px; }
.prose { max-width: 720px; }
.prose h3 { font-size: 22px; margin: 40px 0 12px; }
.prose h4 { margin: 28px 0 8px; }
.prose p { color: var(--text-2); margin-bottom: 14px; }
.prose ul { margin: 0 0 14px 18px; list-style: disc; color: var(--text-2); }
.prose li { margin-bottom: 6px; }
.prose ol { margin: 0 0 14px 18px; color: var(--text-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.modulo { padding: 24px 0; border-top: 1px solid var(--line-soft); }
.modulo__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.modulo__precio { font-weight: 700; white-space: nowrap; }
.modulo p { color: var(--text-2); margin-bottom: 10px; }
.modulo ul { margin: 0 0 0 18px; list-style: disc; color: var(--text-2); font-size: 15px; }
.faq-cat { margin-bottom: 40px; }
.faq-cat h3 { font-size: 20px; margin-bottom: 8px; }

/* ---------- Tablet (≤ 1024) ---------- */
@media (max-width: 1024px) {
  .hero__grid, .problema__grid, .bitacora__grid, .faq__grid, .contacto__grid,
  .producto__row, .producto__row--flip { grid-template-columns: 1fr; gap: 40px; }
  .producto__row--flip .producto__text { order: 0; }
  .calc { grid-template-columns: 1fr; }
  .fundador__grid { grid-template-columns: 160px 1fr; gap: 32px; }
  .fundador__foto { width: 160px; height: 160px; }
}

/* ---------- Nav colapsa a hamburguesa (< 900) ---------- */
@media (max-width: 899px) {
  .nav { height: 60px; }
  .nav__links, .nav__login { display: none; }
  .nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
  }
  .nav__demo { height: 36px; padding: 0 14px; font-size: 14px; }
}
@media (min-width: 900px) { .nav__drawer { display: none !important; } }
@media (min-width: 900px) and (max-width: 1180px) {
  .nav__links { gap: 20px; }
  .nav__links a { font-size: 14px; }
}

/* ---------- Móvil (≤ 640) ---------- */
/* Párrafos de texto corrido justificados en todos los anchos (petición de
   Alfredo, 2026-09-14). hyphens:auto con lang="es" reparte los huecos en móvil. */
.lead, .problema__text p, .producto__row p, .bitacora p, .precios__head p,
.calc__intro p, .fundador p, .faq__intro p, .faq details p, .contacto__intro p,
.page__head p, .prose p, .modulo p { text-align: justify; hyphens: auto; }

@media (max-width: 640px) {
  :root { --section-y: 56px; }
  .container { padding: 0 20px; }
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .lead { font-size: 16px; }
  .hero { padding: 40px 0 56px; }
  .hero__shot .shot__viewport { height: 220px; }
  .problema { padding: 56px 0; }
  .producto__rows { gap: 56px; }
  .producto__row .shot__viewport, .producto__row--ia .shot__viewport, .shot--pendiente { height: 240px; }
  .phone { width: 240px; height: 448px; border-radius: 22px; }
  .producto__row .phone .shot__viewport { width: 240px; height: 448px; }
  /* Tabla papel/EduSync apilada: dos columnas no caben en 390px */
  .tabla-card thead { display: none; }
  .tabla-card tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .tabla-card tr:last-child { border-bottom: 0; }
  .tabla-card td { display: block; padding: 2px 0; border: 0; }
  .tabla-card td + td { padding-left: 0; }
  .tabla-card td + td::before { content: "→ "; color: var(--text-3); }
  .fundadores { flex-direction: column; align-items: flex-start; }
  .calc { padding: 22px; }
  .calc__inputs { grid-template-columns: 1fr; }
  /* Un solo resultado en móvil: el neto */
  .calc__out { grid-template-columns: 1fr; }
  .calc__out .calc__ingreso, .calc__out .calc__costo { display: none; }
  .fundador__grid { grid-template-columns: 1fr; gap: 20px; }
  .fundador__foto { width: 96px; height: 96px; }
  .fundador .small { display: block; margin: 8px 0 0; }
  .form-card { grid-template-columns: 1fr; padding: 22px; }
  .form-card .span2 { grid-column: auto; }
  .form-card .solo-escritorio { display: none; }
  .footer__inner { justify-content: center; text-align: center; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* Tabla de precios ↔ tarjetas apiladas en móvil */
.plan-cards { display: none; }
@media (max-width: 640px) {
  .plan-table { display: none; }
  .plan-cards { display: grid; gap: 16px; }
  .plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
  .plan-card--completo { background: var(--bg-alt); }
  .plan-card .plan__price { font-size: 28px; }
  .plan-card ul { margin: 14px 0 0; }
  .plan-card li { padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
  .plan-card .modulos-linea { color: var(--text-3); }
  .plan-card .total { font-weight: 700; margin-top: 12px; }
}