/* =====================================================================
   Blog (/blog, /en/blog y sus artículos). Va DESPUÉS de home.css y
   pages.css, que ponen la base común (nav, footer, botones, badges,
   encabezado morado, tarjetas de tiempos). Aquí solo van los bloques del
   artículo de la maqueta aprobada (_design: blog-franquicia.html), con sus
   mismos colores y medidas. Se carga solo en las páginas del blog.
   ===================================================================== */
:root {
  --line: #e6e2f2;
  --warn-bg: #fff4d6;
  --warn-fg: #7a4b00;
  --stop: #dc2626;
}

/* ---------- Encabezado del artículo ---------- */
/* Mismo degradado del hero del home, pero el blanco se mide DESDE ABAJO
   con la altura de la portada (ancho de la portada × 630/1200): arriba de la
   portada empieza a aclarar y desde la mitad de la portada hacia abajo ya es
   blanco puro. Así no queda banda de color bajo la portada, y como la
   cabecera no recorta (overflow visible) la sombra de la portada se funde
   en blanco sin corte. --cw = ancho de la portada. */
.post-hero {
  --cw: min(100vw - 32px, 1068px);
  overflow: visible;
  background:
    linear-gradient(
      0deg,
      #fff 0,
      #fff calc(60px + 0.26 * var(--cw)),
      rgba(255, 255, 255, 0.7) calc(80px + 0.42 * var(--cw)),
      rgba(255, 255, 255, 0) calc(140px + 0.6 * var(--cw))
    ),
    linear-gradient(100deg, #a9b6ff 0%, #c3b0ff 45%, #b08cff 75%, #c9a8ff 100%);
}
.post-hero .page-hero__inner { max-width: 1100px; gap: 18px; padding-block: 44px 28px; }
.post-hero h1 { font-size: clamp(34px, 6.4vw, 68px); max-width: 18ch; line-height: 0.95; }
.post-draft {
  background: #ebe7ff;
  color: #2a1c66;
  border-radius: 14px;
  padding: 10px 14px;
  font: 500 13px/1.4 var(--body);
}
.crumbs { font-size: 13px; color: #2a1c66; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: #2a1c66; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { background: var(--black); color: var(--white); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.tag.soft { background: var(--white); color: var(--black); }
.byline { display: flex; gap: 10px 18px; flex-wrap: wrap; font-size: 14px; color: #1d1530; }
.byline b { font-weight: 600; }

/* Portada bajo el título. Las cifras van como HTML encima de la foto. */
.cover { margin: 6px 0 0; }
.cover__frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(40, 20, 90, 0.22);
  background: #20164f;
}
.cover__frame img { width: 100%; height: auto; }
.cover__badges {
  position: absolute;
  left: 3.6%;
  top: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.cover__badge {
  background: var(--black);
  color: var(--white);
  border-radius: 16px;
  padding: 10px 18px;
  font: 800 clamp(15px, 2.4vw, 26px)/1.15 var(--body);
}
.cover__badge--alt { background: #7cf1a1; color: #053b17; font-size: clamp(13px, 1.95vw, 21px); border-radius: 14px; }
.cover figcaption { margin-top: 8px; font-size: 13px; color: #4a4655; }
@media (max-width: 560px) {
  .cover__frame { border-radius: 20px; }
  .cover__badges { gap: 6px; top: 6%; }
  .cover__badge { padding: 6px 10px; border-radius: 10px; }
}

/* ---------- Cuerpo ---------- */
.post { max-width: 1100px; }
.post__col { max-width: 720px; margin: 0 auto; padding-block: 40px 24px; font-size: 17px; line-height: 1.65; }
.post__col a { color: var(--violet); }
.post__col h2 { font: 800 clamp(24px, 3.6vw, 32px)/1.15 var(--body); letter-spacing: -0.01em; margin: 48px 0 14px; text-wrap: balance; }
.post__col h3 { font: 700 19px/1.3 var(--body); margin: 26px 0 8px; }
.post__col p + p { margin-top: 14px; }
.post__col ul, .post__col ol { padding-left: 22px; margin: 12px 0; }
.post__col li + li { margin-top: 8px; }
.post__col .lead { font-size: 19px; color: #1d1530; }

/* Respuesta rápida */
.answer {
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 6px solid var(--violet);
  border-radius: 18px;
  padding: 22px 22px 20px;
  margin: 8px 0 28px;
}
.answer .eyebrow { display: block; margin-bottom: 10px; }
.answer p { font-size: 18px; line-height: 1.55; }
.post__col .answer-note { margin: -16px 0 24px; font-size: 14px; color: #4a4655; }
/* Montos en tablas e infografía: "$150 USD" junto, con "USD" más chico. */
.amt { white-space: nowrap; }
.tbl td.num .cur { font-size: 0.6em; letter-spacing: 0.02em; }
.infog .cur { display: block; font-size: 0.36em; margin-top: 4px; } /* en la infografía, "USD" abajo */

/* Tablas */
.tbl { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: 16px; }
.tbl table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
.tbl th {
  background: var(--black);
  color: var(--white);
  text-align: left;
  font-weight: 600;
  padding: 12px 14px;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tbl--2 table { min-width: 0; } /* 2 columnas caben en el celular sin scroll */
/* Móvil: las tablas de 3+ columnas se vuelven tarjetas apiladas (una por
   fila), con la etiqueta de cada columna (data-label) y sin scroll. */
@media (max-width: 640px) {
  .tbl:not(.tbl--2) { overflow: visible; border: 0; border-radius: 0; }
  .tbl:not(.tbl--2) table { min-width: 0; }
  .tbl:not(.tbl--2) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl:not(.tbl--2) table, .tbl:not(.tbl--2) tbody, .tbl:not(.tbl--2) tr, .tbl:not(.tbl--2) td { display: block; width: 100%; }
  .tbl:not(.tbl--2) tr { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--white); }
  .tbl:not(.tbl--2) tr + tr { margin-top: 10px; }
  .tbl:not(.tbl--2) td { border: 0; padding: 0; }
  .tbl:not(.tbl--2) td + td { margin-top: 10px; }
  .tbl:not(.tbl--2) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font: 600 11px/1.3 var(--body);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b6585;
  }
  .tbl:not(.tbl--2) td.num { font-size: 30px; white-space: normal; }
}
.tbl td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl td.num { font: 800 20px/1.1 var(--display); font-variation-settings: "wdth" 112; white-space: nowrap; color: var(--violet); }
.pend {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px dashed #d9a22b;
  border-radius: 8px;
  padding: 3px 9px;
  font: 600 13px/1.4 var(--body);
  white-space: nowrap;
}

/* Infografía */
.infog {
  margin: 26px 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #4b32a8, #7a52e6);
  color: var(--white);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.infog .box { background: rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 18px; }
.infog .big { font: 900 clamp(40px, 8vw, 64px)/1 var(--display); font-variation-settings: "wdth" 125; }
.infog small { display: block; opacity: 0.85; font-size: 14px; line-height: 1.4; margin-top: 6px; }
.infog .cap { grid-column: 1 / -1; font-size: 13px; opacity: 0.8; }
.infog--3 { grid-template-columns: repeat(3, 1fr); } /* 3 cifras en una fila */
.infog--3 .big { font-size: clamp(36px, 6vw, 56px); }
@media (max-width: 560px) { .infog, .infog--3 { grid-template-columns: 1fr; } }

/* Aviso y documentos */
.callout { display: flex; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 18px 0; }
.callout .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--violet); color: var(--white); display: grid; place-items: center; font-weight: 800; }
.callout.stop .ic { background: var(--stop); }
.callout strong { display: block; }
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.docs div { background: var(--mist); border-radius: 14px; padding: 14px; font-size: 15px; }
.docs strong { display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .docs { grid-template-columns: 1fr; } }

/* Preguntas frecuentes (home.css ya da el + / –; aquí la línea de la maqueta) */
.post__col details { border-bottom: 0; border-top: 1px solid var(--line); padding: 16px 0; }
.post__col details:last-of-type { border-bottom: 1px solid var(--line); }
.post__col summary { font-weight: 700; font-size: 18px; gap: 12px; }
.post__col details p { margin-top: 10px; color: var(--charcoal); max-width: none; }

/* Fuentes */
.src { background: var(--mist); border-radius: 16px; padding: 18px 20px; font-size: 15px; margin-top: 10px; }
.src ul { margin: 0; }
.src li + li, .src li { margin-top: 6px; }
.src p { margin-top: 10px; }

/* ¿Algo desactualizado? (después de las fuentes) */
.report { border: 1px dashed var(--line); border-radius: 16px; padding: 16px 20px; margin-top: 14px; font-size: 15px; }
.report b { display: block; margin-bottom: 4px; }

/* CTA con tiempos en vivo (p-garita.js llena .gcard__lanes) */
.cta {
  background: var(--black);
  color: var(--white);
  border-radius: 28px;
  padding: 28px;
  margin: 48px 0 8px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
}
.post__col .cta h2 { margin: 0 0 10px; color: var(--white); font: 900 clamp(26px, 4vw, 38px)/0.95 var(--display); font-variation-settings: "wdth" 125; }
.cta p { opacity: 0.85; }
.cta p.cta__btn { margin-top: 16px; opacity: 1; }
.post__col .cta a.btn { color: var(--white); }
.cta-live { background: var(--white); color: var(--black); border-radius: 20px; padding: 14px; }
.cta-live__cap { font-size: 10px; letter-spacing: 0.06em; color: #6b6585; text-transform: uppercase; }
.post__col .cta-live__row { display: block; color: var(--black); text-decoration: none; border-top: 1px solid #f0edf6; }
.cta-live__cap + .cta-live__row { border-top: 0; }
.cta-live .lane-row { padding: 9px 0; }
.cta-live__row:hover .lane-row__name { text-decoration: underline; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* Invitación a la Comunidad (después del CTA) */
.community { background: var(--mist); border-radius: 28px; padding: 28px; margin: 16px 0 8px; }
.post__col .community h2 { margin: 0 0 10px; }
.community > p { color: var(--charcoal); max-width: 56ch; }
.community .stores { justify-content: flex-start; margin-top: 18px; }
.post__col .community .badge { color: var(--white); }

/* Sigue leyendo */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 8px; }
.post__col .rel a, .rel__soon { display: block; text-decoration: none; color: var(--black); border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--white); }
.rel span { display: block; font-size: 12px; color: var(--violet); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.rel b { font-size: 16px; line-height: 1.3; }
.rel em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12px; color: var(--warn-fg); background: var(--warn-bg); border-radius: 6px; padding: 2px 7px; }
@media (max-width: 760px) { .rel { grid-template-columns: 1fr; } }

/* ---------- Índice del blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--black);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
}
.post-card__img img { width: 100%; height: auto; }
.post-card__txt { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.post-card h2 { font: 800 21px/1.2 var(--body); margin: 0; }
.post-card p { color: var(--charcoal); font-size: 15px; }
.post-card__date { font-size: 13px; color: #6b6585; }
.post-card .tag { font-size: 11px; padding: 5px 10px; }
.post-card .tag.soft { background: var(--mist); }
.post-empty { background: var(--mist); border-radius: 16px; padding: 28px 20px; text-align: center; color: var(--charcoal); }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }