/* ============================================================
   single.css — Maquetación de Artículos Individuales · Web 3.0
   Marc Zamora Asesor Financiero
   ============================================================ */

/* ─── Contenedor Principal del Post ─── */
.post-article {
  padding-bottom: clamp(60px, 8vw, 120px);
  background-color: var(--color-white);
}

/* ─── Hero del Artículo (Post Hero) ─── */
.post-hero {
  position: relative;
  min-height: calc(100vh - var(--header-height, 80px)); /* Fallback para navegadores antiguos */
  min-height: calc(100dvh - var(--header-height, 80px)); /* Altura dinámica que se adapta a las barras de navegación en móvil */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px clamp(24px, 5%, 60px);
  overflow: hidden;
}
.post-hero > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.post-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Foco del hero por post: en tablet y móvil el recorte central corta el sujeto, que está a la derecha del 16:9.
   Se engancha al nombre del archivo, así no hace falta clase ni estilo inline. */
@media (max-width: 1199px) {
  .post-hero-bg[src*="letras-del-tesoro-noray"] {
    object-position: 70% center;
  }
}
.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
  z-index: 1;
  pointer-events: none;
}
.post-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  text-align: left;
}

/* Migas de pan (Breadcrumbs) */
.post-breadcrumbs {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.post-breadcrumbs a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}
.post-breadcrumbs a:hover {
  color: var(--color-cta);
}
.post-breadcrumbs .sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.3);
}
.post-breadcrumbs .current {
  color: #fff;
  font-weight: 500;
}

/* Categoría en cabecera */
.post-category {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-hero-eyebrow);
  letter-spacing: var(--tracking-hero-eyebrow);
  text-transform: uppercase;
  color: var(--color-cta);
  margin: 0 0 20px 0;
}

/* Título H1 del Post */
.post-title {
  font-size: var(--text-hero-title);
  line-height: 1.25;
  color: #fff !important;
  margin: 0 0 24px 0;
  text-wrap: balance;
}

/* Extracto / Metadescripción del Post */
.post-excerpt {
  font-size: var(--text-hero-desc);
  line-height: 1.7;
  color: oklch(93% 0.005 280);
  max-width: 80ch;
  margin: 0 0 32px 0;
  text-wrap: pretty;
}

/* Metadatos (Autor, Fecha, Tiempo) */
.post-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.post-meta strong {
  color: #fff;
  font-weight: 500;
}
.post-meta-divider {
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
  .post-meta-divider {
    display: none;
  }
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ─── Cuerpo del Artículo (Post Body) ─── */
.post-body {
  max-width: 720px; /* Ancho de lectura óptimo tipo revista premium */
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 5%, 60px) 0 clamp(24px, 5%, 60px);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.85; /* Altura de línea ampliada para evitar fatiga */
  -webkit-font-smoothing: antialiased;
}





/* Párrafo de introducción (Lead Paragraph) */
.post-lead {
  font-size: clamp(19px, 2.2vw, 21px);
  line-height: 1.8;
  color: oklch(35% 0.02 280); /* Un poco más oscuro y destacado */
  margin-bottom: 36px;
}

.post-body p {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Encabezados internos del post */
.post-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  color: var(--color-primary) !important;
  margin-top: 56px;
  margin-bottom: 24px;
  line-height: 1.3;
}

.post-body h3 {
  font-size: clamp(20px, 2.2vw, 24px);
  color: var(--color-primary) !important;
  margin-top: 40px;
  margin-bottom: 24px;
  line-height: 1.3;
}

/* Listas ordenadas y desordenadas personalizadas */
.post-body ul,
.post-body ol {
  margin-top: 0;
  margin-bottom: 32px;
  padding-left: 24px;
}

.post-body li {
  margin-bottom: 12px;
}

.post-body ul li::marker {
  color: var(--color-cta); /* Marcador en verde de la marca */
  font-weight: bold;
}

.post-body ol li::marker {
  color: var(--color-primary); /* Números en azul oscuro de la marca */
  font-weight: bold;
}

/* ─── Premium Lists ─── */
.premium-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 24px;
  margin-bottom: 36px;
}
.premium-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  background-color: oklch(99% 0.003 280);
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid oklch(92% 0.01 280);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 24, 50, 0.04);
}
.premium-list--warning li {
  background-color: oklch(99% 0.003 20);
  border-color: rgba(255, 92, 92, 0.2);
}
.premium-list-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-cta);
  margin-top: 2px;
}
.premium-list--warning .premium-list-icon {
  color: var(--color-error);
}
.premium-list span {
  flex: 1;
}

.post-callout {
  padding: 32px clamp(20px, 4vw, 36px);
  border-radius: 12px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.callout-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-callout--alert .callout-icon {
  background-color: rgba(255, 92, 92, 0.1);
  color: var(--color-error);
}

.post-callout--info .callout-icon {
  background-color: rgba(0, 235, 163, 0.15);
  color: var(--color-primary);
}

.callout-content {
  flex: 1;
}

.post-callout .callout-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading, 600);
  line-height: 1.3;
  font-size: 20px;
  color: var(--color-primary) !important;
  margin-top: 0;
  margin-bottom: 12px;
}

.post-callout p {
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.7;
}

.post-callout p + p {
  margin-top: 12px;
}

.post-callout ul {
  margin-bottom: 0;
  margin-top: 16px;
}

/* Estilo: Alerta / Advertencia */
.post-callout--alert {
  background-color: oklch(98% 0.005 280);
  border-left: 5px solid var(--color-error); /* Borde rojo sutil */
  box-shadow: 0 8px 24px rgba(255, 92, 92, 0.06);
}

/* Estilo: Información / Consejo */
.post-callout--info {
  background-color: oklch(97% 0.01 160); /* Tinte verde súper suave de la marca */
  border-left: 5px solid var(--color-cta); /* Borde verde de la marca */
  box-shadow: 0 8px 24px rgba(0, 235, 163, 0.08);
}

/* Aviso legal al final del artículo (mismo tono que .pricing-disclaimer de /honorarios/) */
.post-body .post-disclaimer {
  margin-top: 48px;
  color: oklch(45% 0.02 280);
}

/* Enlaces dentro del contenido */
.post-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-cta);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 500;
  transition: 
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
.post-body a:hover {
  color: var(--color-cta);
  text-decoration-color: var(--color-primary);
}

/* ─── Tablas del Artículo (Responsive Tables) ─── */
.wp-block-table {
  margin: 48px 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.table-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto; /* Scroll horizontal en móviles */
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid oklch(90% 0.01 280);
  box-shadow: 0 10px 30px rgba(27, 24, 50, 0.05);
}

/* Firefox-specific styling to avoid disabling WebKit scrollbar in Chrome 121+ */
@supports (-moz-appearance: none) {
  .table-scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: oklch(96% 0.005 280) var(--color-primary);
  }
}

/* ─── Scrollbar visible y personalizada para la tabla ─── */
.table-scroll-wrapper::-webkit-scrollbar {
  height: 8px; /* Altura de la barra horizontal */
}
.table-scroll-wrapper::-webkit-scrollbar-track {
  background-color: var(--color-primary); /* Color azul oscuro de la marca */
  border-radius: 0 0 12px 12px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: oklch(96% 0.005 280); /* Color claro */
  border-radius: 8px;
  border: 2px solid var(--color-primary); /* Espaciado visual interno usando el color del track (azul) */
}
.table-scroll-wrapper::-webkit-scrollbar-thumb:active,
.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: oklch(85% 0.005 280); /* Gris clarito al interactuar (hover) */
}
.wp-block-table table {
  margin: 0; /* el tema padre da 20px de margen inferior a table: dejaba una franja blanca bajo la última fila */
  width: 100%;
  min-width: 768px; /* Fuerza el scroll horizontal en móviles para que el texto no se aplaste */
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}
.wp-block-table th,
.wp-block-table td {
  padding: 18px 24px;
  min-width: 250px; /* Garantía a prueba de balas para que iOS no aplaste las celdas */
  border-bottom: 1px solid oklch(92% 0.01 280);
}
.wp-block-table th {
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.wp-block-table tr:last-child td {
  border-bottom: none;
}

/* Estilo alterno de filas (zebrando) */
.is-style-stripes tbody tr:nth-child(even) {
  background-color: oklch(98% 0.005 280);
}

.is-style-regular tbody tr:nth-child(even) {
  background-color: oklch(99% 0.003 280);
}

.table-cell-pro {
  background-color: rgba(0, 235, 163, 0.03);
}

.table-cell-con {
  background-color: rgba(255, 92, 92, 0.02);
}

.table-icon-check {
  width: 18px;
  height: 18px;
  color: var(--color-cta);
  vertical-align: text-bottom;
  margin-right: 6px;
}

.table-icon-cross {
  width: 18px;
  height: 18px;
  color: var(--color-error);
  vertical-align: text-bottom;
  margin-right: 6px;
}

@media (max-width: 600px) {
  .wp-block-table th,
  .wp-block-table td {
    padding: 12px 16px;
    font-size: 15px;
  }
}

/* Tabla compacta: pocas columnas de cifras cortas. No fuerza el scroll horizontal en móvil
   (las tablas normales llevan min-width: 768px para textos largos). Se añade a .wp-block-table. */
.wp-block-table.is-style-compact table {
  min-width: 0;
  font-size: 15px;
}
.wp-block-table.is-style-compact th,
.wp-block-table.is-style-compact td {
  min-width: 0;
  padding: 14px 12px;
}
.wp-block-table.is-style-compact th {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.wp-block-table.is-style-compact th:not(:first-child),
.wp-block-table.is-style-compact td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .wp-block-table.is-style-compact th,
  .wp-block-table.is-style-compact td {
    padding: 12px 8px;
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .wp-block-table.is-style-compact th,
  .wp-block-table.is-style-compact td {
    padding: 10px 6px;
    font-size: 13px;
  }
  .wp-block-table.is-style-compact th {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
}

/* Tabla apilada: muchas columnas con cifras largas. En móvil cada fila pasa a tarjeta y cada celda
   muestra su cabecera (atributo data-label). La cabecera real queda solo para lectores de pantalla. */
@media (max-width: 767px) {
  .wp-block-table.is-style-stacked table {
    min-width: 0;
  }
  .wp-block-table.is-style-stacked thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .wp-block-table.is-style-stacked tr {
    display: block;
    border-bottom: 1px solid oklch(92% 0.01 280);
  }
  .wp-block-table.is-style-stacked tr:last-child {
    border-bottom: none;
  }
  .wp-block-table.is-style-stacked td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 10px 16px;
    border-bottom: none;
    font-size: 15px;
    text-align: right;
  }
  .wp-block-table.is-style-stacked td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-primary);
    text-align: left;
  }
  .wp-block-table.is-style-stacked td:first-child {
    display: block;
    background-color: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .wp-block-table.is-style-stacked td:first-child::before {
    content: none;
  }
}

/* ─── Caja CTA Final del Post (Lead Capture) ─── */
.post-footer-cta {
  max-width: 900px;
  margin: 80px auto 0 auto;
  padding: 0 clamp(24px, 5%, 60px);
}
.post-footer-cta-inner {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1px solid oklch(85% 0.015 280); /* Borde elegante tipo homepage */
  padding: clamp(40px, 6vw, 64px) clamp(30px, 5vw, 60px);
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px oklch(14% 0.04 280 / 0.05); /* Sombra suave tipo homepage */
}
.post-footer-cta-inner h3 {
  font-size: clamp(24px, 3vw, 36px);
  color: var(--color-primary) !important;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.25;
  text-wrap: balance;
}
.post-footer-cta-inner p {
  font-size: 18px; /* Igual que el cuerpo del artículo (22px en PC) */
  line-height: 1.7;
  color: oklch(40% 0.015 280); /* Texto oscuro legible */
  max-width: 700px;
  margin: 0 auto 36px auto;
  text-wrap: pretty;
}



@media (max-width: 767px) {
  .post-footer-cta {
    margin-top: 60px;
  }
  .post-footer-cta-inner {
    border-radius: 12px;
    padding: 40px 20px;
    text-align: left;
  }
  .post-footer-cta-inner p {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 24px;
  }
  .post-footer-cta-inner .cta-actions {
    text-align: center;
  }
}

/* ─── Media Queries de Ancho y Tipografía (Orden de origen para sobrescribir) ─── */
@media (min-width: 768px) {
  .post-body {
    max-width: 100%; /* Spans the full screen width on tablet & PC */
    margin-left: 0;
    margin-right: auto;
  }
  .post-hero-inner {
    max-width: 100%; /* Spans the full screen width on tablet & PC */
    margin-left: 0;
    margin-right: auto;
  }
  .post-footer-cta {
    max-width: 100%; /* Spans the full screen width on tablet & PC */
    margin-left: 0;
    margin-right: auto;
  }
}

@media (min-width: 1200px) {
  .post-body {
    font-size: 22px; /* Proportional text size scaling for PC */
    line-height: 1.9;
  }
  .post-footer-cta-inner p {
    font-size: 22px; /* Mismo tamaño que el cuerpo del artículo en PC */
    max-width: 70ch; /* 65–75 caracteres por línea */
  }
  .post-lead {
    font-size: 26px; /* Larger intro paragraph on PC */
  }
  .post-body h2 {
    font-size: 38px; /* Larger H2 on PC */
  }
  .post-body h3 {
    font-size: 28px; /* Larger H3 on PC */
  }
  .post-callout p {
    font-size: 20px; /* Larger callout text on PC */
  }
  .wp-block-table table {
    font-size: 19px; /* Larger table text on PC */
  }
}

/* ─── Sombra suave del texto del hero ───
   Mismo valor en todos los heros del sitio (tomado de las tarjetas de la home):
   tinte #1B1832, difusa y de baja opacidad — separa el texto de la foto sin "halo". */
.post-hero .post-category,
.post-hero .post-breadcrumbs { text-shadow: 0 1px 4px rgba(10, 8, 24, 0.6); }
.post-hero .post-title { text-shadow: 0 2px 8px rgba(10, 8, 24, 0.5); }
.post-hero .post-excerpt { text-shadow: 0 2px 6px rgba(10, 8, 24, 0.5); }