/* =========================
   BLOG.CSS — Eco Verde A&M
   Rebuild minimal con theming
   ========================= */

/* Importar fuente Inter de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@layer base, components, utilities;

/* ===== TOKENS (LIGHT/DARK) ===== */
@layer base{
  :root{
    /* Paleta */
    --green:#2E7D32; --green-soft:#66BB6A; --green-deep:#1B5E20;
    --blue:#1976D2; --yellow:#F9A825; --white:#FFFFFF; --ink:#212121;
    --muted:#757575; --bg:#FFFFFF; --bg-alt:#F7F7F7;
    --card-bg: rgba(217,217,217,0.58); /* EXACTO de la card */
    --border: rgba(0,0,0,0.12); --border-weak: rgba(0,0,0,0.08);
    --shadow-1: 12px 17px 51px rgba(0,0,0,0.22); /* EXACTO de la card */
    --radius:17px; --radius-sm:12px;
    --blanco-icono: #ffffff; /* Blanco para fondo de íconos base */
    --amarillo-hover: #ffc400; /* Amarillo para fondo en hover */
    --verde-bosque: #388E3C; /* Verde bosque para modo oscuro base */

    /* Tipo & escala */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fs-sm:.95rem; --fs-base:1rem; --fs-h1:2rem; --fs-h2:1.4rem;

    /* Espaciado */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
    --container: 1200px;
  }

  /* Reset suave */
  *{ box-sizing:border-box }
  html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth }
  body{
    margin:0; color:var(--ink); background:var(--bg);
    font-family:var(--font); font-size:var(--fs-base); line-height:1.6;
  }
  img{ max-width:100%; height:auto; display:block }
  a{ color:var(--green); text-decoration:none }
  a:hover{ text-decoration:underline }
  .container{ max-width:var(--container); margin:0 auto; padding:0 var(--sp-5) }
  h1,h2{ margin: var(--sp-6) 0 var(--sp-3); line-height:1.25 }
  h1{ font-size:var(--fs-h1) } h2{ font-size:var(--fs-h2) }
}

/* ===== COMPONENTES DEL BLOG ===== */
@layer components{
  /* Header del listado */
  header.blog-header{
    background: linear-gradient(135deg, rgba(46,125,50,.05), rgba(25,118,210,.05));
    border-bottom:1px solid var(--border-weak);
    padding: var(--sp-8) 0 var(--sp-4);
  }
  .breadcrumbs{
    background:var(--bg-alt); border-top:1px solid var(--border-weak);
    padding: var(--sp-2) var(--sp-5); font-size:.92rem; color:var(--muted);
  }
  .breadcrumbs a{ color:var(--green) }

  /* Grid de posts */
  .post-grid{
    display:grid; gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    max-width: var(--container); margin: var(--sp-8) auto var(--sp-8);
  }

/* **Tarjeta** — Definición única consolidada */
  .card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 320px;
    min-height: 340px;
    padding: 20px 16px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid white;
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    color: var(--ink);
    overflow: hidden; /* mantiene iconos dentro */
    position: relative;
  }
  
  .card:hover {
    border-color: var(--green);
    transform: scale(1.03);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  }
  
  .card:active {
    transform: scale(0.97);
  }


  /* Botones del blog */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 12px; border-radius:12px; border:1px solid var(--green);
    color:var(--green); background:transparent; font-weight:600; text-decoration:none;
    transition: all 0.3s ease; /* transición suave como tarjetas */
    cursor: pointer;
    font-size: 0.85rem; /* tamaño base ajustado */
  }
  .btn-primary{ 
    background:var(--green); color:#fff; border-color:var(--green);
    transition: background-color 0.3s ease, transform 0.3s ease; /* coherente con tarjetas */
  }
  .btn-ghost{
    background: transparent; color: var(--green); border: 1px solid var(--green);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }

  /* Hover coherente con tarjetas */
  .btn:hover{
    background: var(--amarillo-hover); /* usa --amarillo-hover para hover */
    color: #000; /* texto oscuro para contraste */
    border-color: var(--amarillo-hover);
    transform: translateY(-2px); /* leve elevación como tarjetas */
  }
  .btn-primary:hover{
    background: var(--azul-profundo); /* usa --azul-profundo para primary hover */
    border-color: var(--azul-profundo);
  }
  .btn-ghost:hover{
    background: var(--amarillo-hover);
    color: #000;
  }

  /* Active coherente con tarjetas */
  .btn:active{
    transform: translateY(0) scale(0.95); /* compresión como tarjetas */
    transition: transform 0.1s ease;
  }
  .btn-primary:active{
    background: #004d7a; /* tono más oscuro de azul para active */
  }
  .btn-ghost:active{
    background: #e6a600; /* tono más oscuro de amarillo para active */
  }

}

/* ===== RESPONSIVE ===== */
@layer components{
  @media (max-width: 1024px){
    .post-grid{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)) }
  }
  @media (max-width: 768px){
    .post-grid{ grid-template-columns: 1fr; gap: var(--sp-5) }
  }
  @media (max-width: 480px){
    .post-grid{ gap: var(--sp-4); padding: 0 var(--sp-4) }
  }
}

/* ===== UTILIDADES ===== */
@layer utilities{
}

/* ===== AJUSTES FINALES BLOG: ZONA ANTES DEL FOOTER ===== */
@layer components{
  .ea-widget{
    /* En el blog no queremos sticky cerca del footer para evitar solapes */
    position: static;
    top: auto;
    z-index: auto;
    margin: 0 auto var(--sp-6);
    max-width: var(--container);
  }

  .ea-card{
    background: #ffffff;
  }

  /* Dar separación clara entre Eco Asesor y el footer real */
  .site-footer{
    margin-top: var(--sp-6);
  }
}

@layer utilities{
  #post-grid{
    padding-bottom: clamp(32px, 8vw, 80px);
    margin-bottom: clamp(80px, 12vw, 160px);
  }

  .blog-cards-cta{
    margin: 0 auto 0;
    padding: clamp(24px, 6vw, 56px) 0;
  }
  .blog-cards-cta__inner{
    max-width: var(--container);
    margin: 0 auto;
    min-height: 50vh;
    padding: clamp(22px, 4vw, 40px);
    border-radius: 18px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(46,125,50,.08), rgba(25,118,210,.08));
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .blog-cards-cta__inner::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('./img/cta/cta-blog.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: .22;
    z-index: 0;
  }
  .blog-cards-cta__inner::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15,23,42,.35), rgba(15,23,42,.60));
    z-index: 0;
  }
  .blog-cards-cta__inner > *{
    position: relative;
    z-index: 1;
  }
  .blog-cards-cta__title{
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
    line-height: 1.2;
  }
  .blog-cards-cta__sub{
    margin: 0 auto 22px;
    max-width: 70ch;
    color: var(--muted, #757575);
    text-align: center;
    font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem);
    line-height: 1.65;
  }
  .blog-cards-cta__actions{
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-bottom: 10px;
  }
  .blog-cards-cta__actions .btn{
    min-height: 46px;
    padding: 10px 16px;
    font-weight: 800;
  }
  @media (max-width: 480px){
    .blog-cards-cta__actions .btn{
      width: 100%;
      justify-content: center;
    }
  }
}

/* ===== CONTENIDO DE TARJETAS ===== */
@layer components {
  /* .card ya definida arriba — aquí solo .card-content y derivados */

  .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 10px;
  }

  .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
  }

  .card-subtitle {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.4;
    max-width: 26ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: auto;
  }

  .card-actions .btn {
    font-size: 0.85rem;
    border-radius: 10px;
    padding: 6px 12px;
    transition: background-color 0.25s ease, transform 0.25s ease;
  }
}

/* ===== Ajustes responsivos de tarjetas (consolidado) ===== */
@layer components {
  @media (max-width: 768px) {
    .post-grid {
      gap: 16px;
      padding: 0 12px;
    }
    .card {
      max-width: 280px;
      min-height: 300px;
      padding: 16px 12px;
    }
    .card-title { font-size: 1rem; }
    .card-subtitle { font-size: 0.85rem; }
    .card-actions .btn { font-size: 0.8rem; padding: 6px 10px; }
  }

  @media (max-width: 480px) {
    .post-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 0 10px;
    }
    .card {
      max-width: 100%;
      min-height: 280px;
      padding: 14px;
    }
    .card-title { font-size: 0.95rem; }
    .card-subtitle { font-size: 0.8rem; }
    .card-actions { flex-direction: column; gap: 8px; }
    .card-actions .btn { width: 100%; max-width: 180px; }
  }
}

/* ===== ALTURA UNIFORME — reglas ya consolidadas arriba ===== */

/* ===== ESPACIADO DINÁMICO PREMIUM ===== */
@layer components {
  .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: clamp(0.75rem, 1vw + 0.25rem, 1.25rem); /* ajuste fluido */
    padding: clamp(1rem, 2vw, 1.5rem);
  }

  .card-title {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
    font-weight: 700;
    margin-bottom: clamp(0.4rem, 0.6vw, 0.8rem);
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.02em;
  }

  .card-subtitle {
    font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1rem);
    line-height: 1.45;
    color: var(--muted);
    margin-bottom: clamp(0.6rem, 0.8vw, 1rem);
    max-width: 28ch;
  }

  .card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.8rem);
    padding-top: clamp(0.5rem, 1vw, 1rem);
  }

  .btn {
    font-size: clamp(0.8rem, 0.7rem + 0.2vw, 0.9rem);
    padding: clamp(0.4rem, 0.5vw, 0.6rem) clamp(0.8rem, 1vw, 1.2rem);
    border-radius: 0.6rem;
    font-weight: 600;
  }

  /* Ajuste fino en móviles */
  @media (max-width: 480px) {
    .card-content {
      gap: 0.8rem;
      padding: 1rem;
    }
    .card-title {
      margin-bottom: 0.4rem;
    }
    .card-subtitle {
      margin-bottom: 0.6rem;
    }
    .card-actions {
      gap: 0.6rem;
      padding-top: 0.6rem;
    }
  }
}

/* ===== ICONOS DENTRO DE TARJETAS (versión estable) ===== */
@layer components {
  /* .card overflow ya definido arriba */

  .card-icon {
    width: 100px;
    height: 100px;
    aspect-ratio: 1; /* asegura forma cuadrada perfecta */
    background: var(--blanco-icono);
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    transition: all 0.35s ease-in-out;
  }

  .card-icon img,
  .card-icon svg {
    width: 95px; /* tamaño ajustado para mejor centrado */
    height: 95px;
    max-width: 100%; /* asegura ajuste sin distorsión */
    max-height: 100%;
    aspect-ratio: 1; /* mantiene proporción cuadrada */
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
  }

  /* ===== ESTADOS DINÁMICOS ===== */
  .card:hover .card-icon {
    background: var(--amarillo-hover);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transform: scale(1.07);
  }

  .card:hover .card-icon img,
  .card:hover .card-icon svg {
    transform: scale(1.1);
    opacity: 0.95;
  }

  .card:active .card-icon {
    transform: scale(0.95);
    transition: transform 0.2s ease;
  }

  /* ===== MODO OSCURO ===== */
  :root[data-theme="dark"] .card-icon {
    background: var(--verde-bosque);
    box-shadow: 0 6px 10px rgba(255, 255, 255, 0.1);
  }

  :root[data-theme="dark"] .card:hover .card-icon {
    background: var(--amarillo-hover);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .card-icon {
      width: 75px;
      height: 75px;
      aspect-ratio: 1;
      margin-bottom: var(--space-3);
    }
    .card-icon img,
    .card-icon svg {
      width: 60px; /* ajustado proporcionalmente */
      height: 60px;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 1;
    }
  }

  @media (max-width: 480px) {
    .card-icon {
      width: 65px;
      height: 65px;
      aspect-ratio: 1;
    }
    .card-icon img,
    .card-icon svg {
      width: 50px; /* ajustado proporcionalmente */
      height: 50px;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 1;
    }
  }
}

/* ===== HERO STORYTELLING (aislado) ===== */
@layer components {
  .hero-ev{
    background:
      radial-gradient(1200px 300px at 10% 0%, color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 90%), transparent),
      radial-gradient(1000px 260px at 90% 0%, color-mix(in srgb, var(--amarillo-sol, #F9A825), transparent 88%), transparent);
    border-bottom: 1px solid var(--border-weak, rgba(0,0,0,.08));
    padding: clamp(28px, 6vw, 56px) 0;
    margin: 0 0 clamp(20px, 4vw, 36px);
  }
  .hero-ev .container{ max-width: 1100px; }
  .hero-wrap{ display: grid; grid-template-columns: 1fr; gap: 16px; }
  .hero-copy{ max-width: 760px; }
  .hero-title{
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink, #212121);
  }
  .hero-sub{
    margin: 0 0 18px;
    color: var(--muted, #757575);
    font-size: clamp(1rem, .9rem + .3vw, 1.125rem);
    line-height: 1.55;
    max-width: 65ch;
  }
  .hero-ctas{
    display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px;
  }
  .hero-badges{
    list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap;
  }
  .hero-badges li{
    padding: 6px 10px; border-radius: 9999px;
    background: var(--card, #fff); color: var(--ink, #212121);
    border: 1px solid var(--border, rgba(0,0,0,.12));
    font-size: .85rem;
  }

  /* Modo oscuro coherente */
  :root[data-theme="dark"] .hero-ev{
    background:
      radial-gradient(1200px 300px at 10% 0%, color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 85%), transparent),
      radial-gradient(1000px 260px at 90% 0%, color-mix(in srgb, var(--amarillo-sol, #F9A825), transparent 82%), transparent);
    border-bottom-color: var(--border, rgba(255,255,255,.14));
  }
  :root[data-theme="dark"] .hero-badges li{
    background: var(--card, #1E293B);
    color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.12));
  }

  /* Responsive del hero */
  @media (max-width: 768px){
    .hero-copy{ max-width: 100% }
    .hero-ctas{ gap: 8px }
    .hero-badges{ gap: 8px }
  }
}

/* ===== LEAD MAGNET LIGHT ===== */
@layer components {
  /* (Se eliminó la sección lead-light del blog; este bloque queda reservado por si se reutiliza en otras páginas) */
}

/* ===== SMART CURSOR (feature-flag) ===== */
@layer components{
  .ux-cursor{
    position: fixed;
    left: 0; top: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 30%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-100px, -100px);
    transition: opacity 180ms ease;
    opacity: 0; /* por defecto oculto */
    will-change: transform;
    mix-blend-mode: normal;
    backdrop-filter: blur(0px);
  }
  /* estado visible */
  .ux-cursor.is-on{ opacity: .9 }
  /* sobre elementos interactivos */
  .ux-cursor.is-hot{
    width: 28px; height: 28px;
    border-width: 3px;
  }
  /* modo oscuro: aro más claro */
  :root[data-theme="dark"] .ux-cursor{
    border-color: color-mix(in srgb, #FFFFFF, transparent 35%);
    opacity: .85;
  }
  /* respeta reduce-motion */
  @media (prefers-reduced-motion: reduce){
    .ux-cursor{ display:none }
  }
}

/* ===== FILTRADO DE POSTS ===== */
@layer components {
  .post-filters { margin: 24px auto 8px; }
  .post-filters .container { max-width: 1200px; }
  .chips { display:flex; flex-wrap:wrap; gap:10px; }
  .chip {
    appearance: none; border:1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff); color: var(--ink, #222);
    padding: 8px 12px; border-radius: 999px; font-weight:600; font-size:.9rem;
    cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .08s ease;
  }
  .chip:focus { outline: 2px solid var(--ring, rgba(46,125,50,.35)); outline-offset: 2px; }
  .chip.is-active { background: var(--verde-bosque, #2E7D32); color:#fff; border-color: transparent; }
  .chip:active { transform: scale(.98); }
  /* Ocultar tarjetas por filtro sin tocar sus estilos */
  .card.is-hidden { display: none; }
}

/* ===== JERARQUÍA INTERNA — consolidado arriba ===== */

/* ===== SCROLL REVEAL ===== */
@layer components {
  /* Estado inicial de las tarjetas para reveal */
  .card.reveal-init {
    opacity: 0;
    transform: translateY(14px);
  }

  /* Estado visible */
  .card.reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity 300ms ease, transform 300ms ease;
  }
}

/* Accesibilidad: si el usuario prefiere menos movimiento, deja todo visible sin transiciones */
@media (prefers-reduced-motion: reduce) {
  .card.reveal-init,
  .card.reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== TIPOGRAFÍA Y RITMO INTERNO ===== */
@layer components {
  /* —— Escala tipográfica con clamp para responsividad suave —— */
  :root {
    --fz-title: clamp(1.05rem, 0.9rem + 1.2vw, 1.35rem);
    --fz-sub:   clamp(0.95rem, 0.85rem + 0.6vw, 1.05rem);
    --fz-text:  clamp(0.85rem, 0.8rem + 0.4vw, 0.95rem);
  }

  /* —— Contenedor de contenido en tarjetas —— */
  .card .card-content {
    display: grid;
    grid-template-rows: auto auto 1fr auto; /* título, subtítulo, excerpt (flex), acciones */
    gap: 0.5rem;
    padding: 0.85rem 1rem;
  }

  /* Título */
  .card .card-title {
    font-size: var(--fz-title);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }

  /* Subtítulo/eyebrow */
  .card .card-subtitle {
    font-size: var(--fz-sub);
    line-height: 1.35;
    color: var(--muted);
    margin: 0;
  }

  /* Extracto: multi-línea con clamp (gracia si no hay soporte) */
  .card .card-excerpt {
    font-size: var(--fz-text);
    line-height: 1.5;
    color: var(--ink);
    margin: 0.15rem 0 0.25rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* 3 líneas */
    line-clamp: 3;           /* Estándar para compatibilidad */
    -webkit-box-orient: vertical;
  }

  /* Acciones alineadas al final (CTA + “solicitar asesoría”) */
  .card .card-actions {
    margin-top: 0.35rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
  }

  /* Botones dentro de tarjetas: alturas consistentes (sin tocar estados) */
  .card .btn {
    min-height: 36px;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
  }

  /* Prevención de desbordes raros en textos largos */
  .card .card-title,
  .card .card-subtitle {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ===== FIN ESTILOS GENERALES BLOG ===== */

/* ===== ESTILOS PARA POST: MANTENIMIENTO DE CERCAS VIVAS ===== */
.post-hero-cercas {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 2.5rem;
  box-shadow: var(--shadow-1);
}

.post-hero-cercas__image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Relación 16:9 */
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-hero-cercas__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-hero-cercas__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  color: white;
}

.post-hero-cercas__category {
  display: inline-block;
  background: var(--green);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.post-hero-cercas__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.post-hero-cercas__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0 0 1.5rem;
  color: #ffffff;
  opacity: 0.95;
  max-width: 800px;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Estilos para la introducción del post */
.post-intro {
  background: #f0fdf4; /* Verde muy claro */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #bbf7d0; /* Borde verde más claro */
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 800px;
  position: relative;
  overflow: hidden;
}

/* Efecto de borde lateral izquierdo */
.post-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #22c55e; /* Verde más intenso para el borde */
}

/* Estilos para el ícono de hoja */
.post-intro {
  position: relative;
  padding-left: 4.5rem; /* Espacio para el ícono */
}

.post-intro__leaf-icon {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  color: #22c55e; /* Color verde para el ícono */
}

.post-intro p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}

.post-intro strong {
  color: #2E7D32;
  font-weight: 600;
}

.post-intro-cercas {
  max-width: 800px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

.post-intro-cercas p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--ink);
}

/* Estilos para la sección de preguntas frecuentes - REMOVIDOS - Ver línea 1056 */

/* Estilos para la navegación entre artículos */
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.nav-previous,
.nav-next {
  flex: 1;
}

.nav-next {
  text-align: right;
}

.nav-label {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.nav-title {
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}

.nav-title:hover {
  text-decoration: underline;
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .post-hero-cercas__overlay {
    padding: 1.5rem 1rem;
  }
  
  .post-hero-cercas__title {
    font-size: 1.75rem;
  }
  
  .post-intro-cercas p {
    font-size: 1rem;
  }
  
  .post-navigation {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .nav-previous,
  .nav-next {
    text-align: left;
  }
}
@layer components {
  .post-back-sticky-wrap{
    position: sticky;
    top: 20px;
    z-index: 5;
    display: block;
    margin-bottom: 12px;
  }
  .post-back-sticky{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 9999px;
    background: var(--card, #fff);
    color: var(--ink, #222);
    border: 1px solid var(--border, rgba(0,0,0,.12));
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    transition: background-color .2s ease, border-color .2s ease, transform .08s ease;
  }
  .post-back-sticky:hover{
    background: color-mix(in srgb, var(--azul-profundo, #1976D2), white 92%);
    border-color: color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 70%);
  }
  .post-back-sticky:active{ transform: scale(.98) }

  /* Modo oscuro coherente */
  :root[data-theme="dark"] .post-back-sticky{
    background: var(--card, #1E293B);
    color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.14));
    box-shadow: 0 6px 12px rgba(255,255,255,.06);
  }
}

/* ===== BLOG TOPBAR (sticky + compact) ===== */
@layer components {
  .blog-topbar{
    /* Desplazar la topbar por debajo del header fijo global (70px) */
    position: sticky;
    top: 70px;
    z-index: 50;
    background: color-mix(in srgb, var(--bg, #fff), transparent 0%);
    border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
    backdrop-filter: blur(6px);
    transition: height 160ms ease, border-color 160ms ease, background-color 160ms ease;
  }
  .blog-topbar .topbar-inner{
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    height: 64px; gap: 12px;
  }
  .topbar-title{
    font-weight: 800; letter-spacing: -0.015em; color: var(--ink, #222); text-decoration: none;
  }
  .topbar-search input{
    width: min(42vw, 340px); height: 38px; border-radius: 12px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff); color: var(--ink, #222);
    padding: 0 12px; outline: none;
    transition: box-shadow 160ms ease, border-color 160ms ease;
  }
  .topbar-search input:focus{
    border-color: color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 60%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 80%);
  }

  /* Compactación al hacer scroll */
  .blog-topbar.is-scrolled .topbar-inner{ height: 48px; }
  .blog-topbar.is-scrolled{ background: color-mix(in srgb, var(--bg, #fff), transparent 0%); }

  /* Modo oscuro coherente */
  :root[data-theme="dark"] .blog-topbar{
    background: color-mix(in srgb, var(--bg, #0F172A), transparent 0%);
    border-bottom-color: var(--border, rgba(255,255,255,.14));
  }
  :root[data-theme="dark"] .topbar-search input{
    background: var(--card, #1E293B); color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.12));
  }

  /* Utilidad accesible */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* Ocultación por búsqueda (NO interfiere con estados/estilos de tarjeta) */
  .card.is-hidden-srch{ display: none; }
}

@media (max-width: 640px){
  .topbar-search input{ width: min(66vw, 280px); }
}

/* ===== MEJORAS VISUALES PARA POSTS ===== */
@layer components {
  /* Mejora de la introducción del post */
  .post-intro {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    margin: clamp(2rem, 4vw, 3rem) 0;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.03) 0%, rgba(46, 125, 50, 0.05) 100%);
    border-left: 4px solid var(--green, #4CAF50);
    border-radius: 0 12px 12px 0;
  }
  
  .post-intro__leaf-icon {
    width: 48px;
    height: 48px;
    color: var(--green, #4CAF50);
    margin-bottom: 1.5rem;
    opacity: 0.9;
  }
  
  .post-intro p {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
    line-height: 1.8;
    color: var(--ink, #333);
    margin-bottom: 1.25rem;
  }
  
  .post-intro p:last-child {
    margin-bottom: 0;
  }
  
  /* Mejora del índice */
  .post-index {
    background: var(--card, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    margin: clamp(2rem, 4vw, 3rem) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  
  .post-index h2 {
    font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
    color: var(--green-deep, #2E7D32);
    margin: 0 0 1.25rem;
    font-weight: 700;
  }
  
  .post-index__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
  }
  
  .post-index__item {
    position: relative;
    padding-left: 0;
  }
  
  .post-index__link {
    color: var(--ink, #333);
    text-decoration: none;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    line-height: 1.6;
    transition: color 0.2s ease;
    display: inline-block;
  }
  
  .post-index__link:hover {
    color: var(--green, #4CAF50);
  }
  
  /* Mejora de secciones del post */
  .post-section {
    margin: clamp(3rem, 5vw, 4.5rem) 0;
  }
  
  .post-section__title {
    font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
    color: var(--green-deep, #2E7D32);
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    position: relative;
    padding-bottom: 0.75rem;
  }
  
  .post-section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--green, #4CAF50) 0%, transparent 100%);
    border-radius: 2px;
  }
  
  .post-section h3 {
    font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.65rem);
    color: var(--ink, #222);
    margin: clamp(2rem, 3vw, 2.5rem) 0 1rem;
    font-weight: 600;
  }
  
  .post-section p {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    line-height: 1.75;
    color: var(--ink-light, #555);
    margin-bottom: 1.25rem;
  }
  
  .post-section ul {
    margin: 1.25rem 0;
    padding-left: 1.5rem;
    list-style: none;
  }
  
  .post-section ul li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.875rem;
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    line-height: 1.7;
    color: var(--ink-light, #555);
  }
  
  .post-section ul li strong {
    color: var(--green-deep, #2E7D32);
    font-weight: 600;
  }
  
  /* Mejora de tarjetas de contenido */
  .post-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  }
  
  .post-card {
    background: var(--card, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
  }
  
  .post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--green, #4CAF50), var(--green-deep, #2E7D32));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .post-card:hover {
    border-color: var(--green, #4CAF50);
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.12);
    transform: translateY(-2px);
  }
  
  .post-card:hover::before {
    transform: scaleX(1);
  }
  
  .post-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(46, 125, 50, 0.15) 100%);
    border-radius: 12px;
    margin-bottom: 1rem;
  }
  
  .post-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--green, #4CAF50);
  }
  
  .post-card__content h4 {
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    color: var(--green-deep, #2E7D32);
    margin: 0 0 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 0.25rem;
  }
  
  .post-card__content p {
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    line-height: 1.7;
    color: var(--ink-light, #555);
    margin: 0;
  }
  
  /* Mejora de bloques de información */
  .post-block {
    background: var(--card, #fff);
    border-left: 4px solid;
    border-radius: 0 12px 12px 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: clamp(1.5rem, 3vw, 2rem) 0;
    display: flex;
    gap: 1.25rem;
  }
  
  .post-block--info {
    border-color: #2196F3;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.03) 0%, rgba(33, 150, 243, 0.05) 100%);
  }
  
  .post-block--success {
    border-color: var(--green, #4CAF50);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.03) 0%, rgba(76, 175, 80, 0.05) 100%);
  }
  
  .post-block--warning {
    border-color: #FF9800;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.03) 0%, rgba(255, 152, 0, 0.05) 100%);
  }
  
  .post-block__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .post-block__icon svg {
    width: 24px;
    height: 24px;
  }
  
  .post-block--info .post-block__icon svg {
    color: #2196F3;
  }
  
  .post-block--success .post-block__icon svg {
    color: var(--green, #4CAF50);
  }
  
  .post-block--warning .post-block__icon svg {
    color: #FF9800;
  }
  
  .post-block__content h4 {
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
    margin: 0 0 0.75rem;
    font-weight: 600;
  }
  
  .post-block--info .post-block__content h4 {
    color: #1976D2;
  }
  
  .post-block--success .post-block__content h4 {
    color: var(--green-deep, #2E7D32);
  }
  
  .post-block--warning .post-block__content h4 {
    color: #F57C00;
  }
  
  .post-block__content p,
  .post-block__content ul {
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    line-height: 1.7;
    color: var(--ink-light, #555);
  }
  
  /* Dark mode */
  :root[data-theme="dark"] .post-intro {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(46, 125, 50, 0.12) 100%);
  }
  
  :root[data-theme="dark"] .post-index {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  :root[data-theme="dark"] .post-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  :root[data-theme="dark"] .post-block {
    background: rgba(255, 255, 255, 0.03);
  }
}

/* ===== FAQ ACCORDION ===== */
@layer components {
  .post-faq{ margin: clamp(20px, 5vw, 40px) 0; }
  .post-faq .faq-title{ margin: 0 0 10px; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
  .faq-list{ display: grid; gap: 8px; }
  
  .post-body .post-faq .faq-list .faq-item{
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 12px;
    background: var(--card, #fff);
    padding: 0;
    margin: 0;
  }
  
  .post-body .post-faq .faq-list .faq-item > summary{
    cursor: pointer;
    list-style: none;
    padding: 16px 14px;
    font-weight: 700;
    color: var(--ink, #222);
    background: transparent;
  }
  
  .post-body .post-faq .faq-list .faq-item > summary::-webkit-details-marker{ 
    display: none;
  }
  
  .post-body .post-faq .faq-list .faq-item > summary::before{
    display: none;
  }
  
  .post-body .post-faq .faq-list .faq-item:not([open]) .faq-answer{
    display: none;
  }
  
  .post-body .post-faq .faq-list .faq-item[open] > summary{
    padding-bottom: 8px;
  }
  
  .post-body .post-faq .faq-list .faq-answer{ 
    padding: 0 14px 14px;
    color: var(--ink, #333);
    background: transparent;
  }
  
  .post-body .post-faq .faq-list .faq-answer p{
    padding: 0;
    margin: 0 0 0.75rem;
    background: transparent;
  }
  
  :root[data-theme="dark"] .post-body .post-faq .faq-list .faq-item{
    background: var(--card, #1E293B);
    border-color: var(--border, rgba(255,255,255,.14));
  }
  
  :root[data-theme="dark"] .post-body .post-faq .faq-list .faq-answer{ 
    color: var(--ink, #E2E8F0);
  }
}

/* ===== HERO REFORZADO ===== */
@layer components {
  /* HERO — Reforzar contraste, espaciado y jerarquía */
  .hero-ev{
    padding: clamp(36px, 6vw, 68px) 0;
    margin: 0 0 clamp(24px, 5vw, 40px);
    background:
      radial-gradient(1100px 300px at 15% -5%, color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 88%), transparent),
      radial-gradient(900px 260px at 85% -8%, color-mix(in srgb, var(--amarillo-sol, #F9A825), transparent 86%), transparent);
    border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
  }
  .hero-ev .container{ max-width: 1100px }
  .hero-wrap{ display:grid; grid-template-columns: 1fr; gap: 14px }
  .hero-copy{ max-width: 780px }

  .hero-title{
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink, #212121);
  }
  .hero-sub{
    margin: 0 0 16px;
    color: color-mix(in srgb, var(--ink, #212121), transparent 35%);
    font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
    line-height: 1.6;
    max-width: 68ch;
  }

  .hero-ctas{
    display:flex; gap:10px; flex-wrap:wrap; margin: 2px 0 8px;
  }
  .hero-ctas .btn{ min-height: 40px; border-radius: 12px; font-weight: 800 }
  .hero-ctas .btn.btn-primary{
    background: var(--verde-bosque, #2E7D32); color:#fff; box-shadow: 0 8px 20px rgba(0,0,0,.10);
  }
  .hero-ctas .btn.btn-ghost{
    border: 1px solid color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 60%);
    color: var(--azul-profundo, #1976D2);
    background: color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 94%);
  }
  .hero-ctas .btn.btn-ghost:hover{
    border-color: color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 30%);
    background: color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 86%);
  }

  .hero-badges{
    list-style:none; padding:0; margin: 14px 0 0;
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .hero-badges li{
    padding: 6px 10px; border-radius:9999px;
    background: var(--card, #fff); color: var(--ink, #212121);
    border:1px solid var(--border, rgba(0,0,0,.12));
    font-size: .9rem; font-weight:700;
  }

  /* Dark mode: contraste y bordes */
  :root[data-theme="dark"] .hero-ev{
    background:
      radial-gradient(1100px 300px at 15% -5%, color-mix(in srgb, var(--azul-profundo, #5ba7ff), transparent 80%), transparent),
      radial-gradient(900px 260px at 85% -8%, color-mix(in srgb, var(--amarillo-sol, #F9A825), transparent 80%), transparent);
    border-bottom-color: var(--border, rgba(255,255,255,.14));
  }
  :root[data-theme="dark"] .hero-sub{
    color: color-mix(in srgb, var(--ink, #E2E8F0), transparent 40%);
  }
  :root[data-theme="dark"] .hero-badges li{
    background: var(--card, #1E293B); color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.12));
  }

  /* Responsivo */
  @media (max-width: 640px){
    .hero-ctas .btn{ width: 100%; justify-content:center }
  }
}

/* Quitar línea inferior solo en el hero dentro del main del blog */
@layer components {
  .main-content .hero-ev{
    border-bottom: none;
  }
}

/* ===== HERO PRINCIPAL BLOG (masthead) ===== */
@layer components {
  /* Contenedor del hero de portada del blog */
  .blog-hero-masthead{
    position: relative;
    width: 100%;
    min-height: min(100vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center; /* centro horizontal */
    margin: 0;
    overflow: hidden;
  }

  /* Asegura que el contenido quede por encima del overlay */
  .blog-hero-masthead .hero-wrap{
    position: relative;
    z-index: 2;
  }

  .blog-hero-masthead .hero-copy{
    max-width: 760px;
    color: var(--white);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(
      to bottom,
      rgba(15,23,42,0.85),
      rgba(15,23,42,0.55)
    );
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  }

  .blog-hero-masthead .hero-title{
    color: var(--white);
    text-shadow: 0 10px 30px rgba(0,0,0,.45);
    text-align: center;
  }

  .blog-hero-masthead .hero-sub{
    color: color-mix(in srgb, #FFFFFF, transparent 22%);
    text-shadow: 0 6px 20px rgba(0,0,0,.35);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .blog-hero-masthead .hero-ctas .btn{
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }

  /* Ajustes responsivos del masthead */
  @media (max-width: 768px){
    .blog-hero-masthead{
      min-height: 80vh;
      align-items: flex-end;
    }

    .blog-hero-masthead .hero-copy{
      max-width: 100%;
    }
  }

  @media (max-width: 480px){
    .blog-hero-masthead{
      min-height: 70vh;
    }

    .blog-hero-masthead .hero-ctas{
      flex-direction: column;
      align-items: stretch;
    }

    .blog-hero-masthead .hero-ctas .btn{
      width: 100%;
      justify-content: center;
    }
  }
}

/* ===== UTILIDADES ÍCONOS SVG ===== */
@layer components {
  /* Utilidades para íconos SVG con currentColor */
  .icon-svg{
    width: 48px; height: 48px; display:inline-block; color: var(--ink, #222);
  }
  .icon-svg--lg{ width: 64px; height: 64px }
  .icon-svg--xl{ width: 80px; height: 80px }
  .icon-svg use{ pointer-events: none }
  /* Dark mode hereda automáticamente por color */
  :root[data-theme="dark"] .icon-svg{ color: var(--ink, #E2E8F0) }
}

/* ===== MINI-CTA STICKY (posts) ===== */
@layer components{
  .mini-cta{
    position: sticky; top: 20px; z-index: 6;
    margin: 12px 0 16px;
  }
  .mini-cta__card{
    background: var(--card, #fff);
    color: var(--ink, #222);
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .mini-cta__title{
    margin: 0 0 6px; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight: 800;
  }
  .mini-cta__sub{
    margin: 0 0 10px; color: color-mix(in srgb, var(--ink, #222), transparent 40%);
    font-size: .95rem;
  }
  .mini-cta__actions{
    display: grid; gap: 8px;
    grid-template-columns: 1fr;
  }
  .mini-cta__btn{ width: 100%; justify-content: center; border-radius: 12px; min-height: 40px; font-weight: 800 }

  /* Dark mode */
  :root[data-theme="dark"] .mini-cta__card{
    background: var(--card, #1E293B);
    color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.14));
    box-shadow: 0 10px 22px rgba(255,255,255,.06);
  }

  /* Responsive: en móviles, el sticky cede y baja al flujo normal (evita solaparse) */
  @media (max-width: 768px){
    .mini-cta{ position: static; }
  }
}

/* ===== BACK-TO-TOP BUTTON ===== */
.btn-top,
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--green, #2E7D32);
  background: linear-gradient(135deg, #ffffff 0%, #f0f9f0 100%);
  color: var(--green, #2E7D32);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-top.visible,
.btn-top.is-on,
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.btn-top:hover,
.back-to-top:hover {
  background: linear-gradient(135deg, var(--green, #2E7D32) 0%, #388E3C 100%);
  color: #fff;
  border-color: var(--green, #2E7D32);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(46, 125, 50, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-top:active,
.back-to-top:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

.btn-top:focus,
.back-to-top:focus {
  outline: 3px solid rgba(46, 125, 50, 0.4);
  outline-offset: 2px;
}

.btn-top svg,
.back-to-top svg,
.btn-top__icon {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.2s ease;
}

.btn-top:hover svg,
.back-to-top:hover svg {
  transform: translateY(-2px);
}

/* Dark mode */
:root[data-theme="dark"] .btn-top,
:root[data-theme="dark"] .back-to-top {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  color: #4ADE80;
  border-color: #4ADE80;
  box-shadow: 0 4px 15px rgba(74, 222, 128, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .btn-top:hover,
:root[data-theme="dark"] .back-to-top:hover {
  background: linear-gradient(135deg, #4ADE80 0%, #22C55E 100%);
  color: #1E293B;
  border-color: #4ADE80;
}

@media (max-width: 480px) {
  .btn-top,
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
  .btn-top svg,
  .back-to-top svg,
  .btn-top__icon {
    width: 20px;
    height: 20px;
  }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .btn-top{ transition: none }
}

/* ===== GRID 12 UTILITIES ===== */
@layer utilities{
  /* Tokens de grilla */
  :root{
    --grid-gap: clamp(10px, 2vw, 20px);
    --grid-max: 1200px;
  }

  /* Contenedor amplio opcional */
  .container-xl{
    width: 100%;
    max-width: var(--grid-max);
    margin: 0 auto;
    padding-inline: clamp(12px, 3vw, 24px);
  }

  /* Grilla base */
  .grid{ display: grid; gap: var(--grid-gap) }
  .grid-12{ grid-template-columns: repeat(12, minmax(0,1fr)); }
  .grid-6 { grid-template-columns: repeat(6,  minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(3,  minmax(0,1fr)); }
  .grid-2 { grid-template-columns: repeat(2,  minmax(0,1fr)); }

  /* Spans (desktop por defecto) */
  .col-span-1 { grid-column: span 1 / span 1 }
  .col-span-2 { grid-column: span 2 / span 2 }
  .col-span-3 { grid-column: span 3 / span 3 }
  .col-span-4 { grid-column: span 4 / span 4 }
  .col-span-5 { grid-column: span 5 / span 5 }
  .col-span-6 { grid-column: span 6 / span 6 }
  .col-span-7 { grid-column: span 7 / span 7 }
  .col-span-8 { grid-column: span 8 / span 8 }
  .col-span-9 { grid-column: span 9 / span 9 }
  .col-span-10{ grid-column: span 10 / span 10 }
  .col-span-11{ grid-column: span 11 / span 11 }
  .col-span-12{ grid-column: span 12 / span 12 }

  /* Atajos de alineación */
  .items-start   { align-items: start }
  .items-center  { align-items: center }
  .items-end     { align-items: end }
  .justify-start { justify-items: start }
  .justify-center{ justify-items: center }
  .justify-end   { justify-items: end }
  .content-center{ place-content: center }
  .place-center  { place-items: center }

  /* Responsivo: md (≥768px) y lg (≥1024px) */
  @media (max-width: 1023.98px){
    .lg-col-span-1, .lg-col-span-2, .lg-col-span-3, .lg-col-span-4,
    .lg-col-span-5, .lg-col-span-6, .lg-col-span-7, .lg-col-span-8,
    .lg-col-span-9, .lg-col-span-10, .lg-col-span-11, .lg-col-span-12 { grid-column: auto }
  }
  @media (max-width: 767.98px){
    .md-col-span-1, .md-col-span-2, .md-col-span-3, .md-col-span-4,
    .md-col-span-5, .md-col-span-6, .md-col-span-7, .md-col-span-8,
    .md-col-span-9, .md-col-span-10, .md-col-span-11, .md-col-span-12 { grid-column: auto }
    /* Columna única por defecto en móvil */
    .grid-12, .grid-6, .grid-3, .grid-2 { grid-template-columns: 1fr }
  }

  /* Variantes responsivas explícitas */
  @media (min-width: 768px){
    .md-grid-12{ grid-template-columns: repeat(12, minmax(0,1fr)) }
    .md-grid-6 { grid-template-columns: repeat(6,  minmax(0,1fr)) }
    .md-grid-3 { grid-template-columns: repeat(3,  minmax(0,1fr)) }
    .md-grid-2 { grid-template-columns: repeat(2,  minmax(0,1fr)) }

    .md-col-span-1 { grid-column: span 1 / span 1 }
    .md-col-span-2 { grid-column: span 2 / span 2 }
    .md-col-span-3 { grid-column: span 3 / span 3 }
    .md-col-span-4 { grid-column: span 4 / span 4 }
    .md-col-span-5 { grid-column: span 5 / span 5 }
    .md-col-span-6 { grid-column: span 6 / span 6 }
    .md-col-span-7 { grid-column: span 7 / span 7 }
    .md-col-span-8 { grid-column: span 8 / span 8 }
    .md-col-span-9 { grid-column: span 9 / span 9 }
    .md-col-span-10{ grid-column: span 10 / span 10 }
    .md-col-span-11{ grid-column: span 11 / span 11 }
    .md-col-span-12{ grid-column: span 12 / span 12 }
  }

  @media (min-width: 1024px){
    .lg-grid-12{ grid-template-columns: repeat(12, minmax(0,1fr)) }
    .lg-grid-6 { grid-template-columns: repeat(6,  minmax(0,1fr)) }
    .lg-grid-3 { grid-template-columns: repeat(3,  minmax(0,1fr)) }
    .lg-grid-2 { grid-template-columns: repeat(2,  minmax(0,1fr)) }

    .lg-col-span-1 { grid-column: span 1 / span 1 }
    .lg-col-span-2 { grid-column: span 2 / span 2 }
    .lg-col-span-3 { grid-column: span 3 / span 3 }
    .lg-col-span-4 { grid-column: span 4 / span 4 }
    .lg-col-span-5 { grid-column: span 5 / span 5 }
    .lg-col-span-6 { grid-column: span 6 / span 6 }
    .lg-col-span-7 { grid-column: span 7 / span 7 }
    .lg-col-span-8 { grid-column: span 8 / span 8 }
    .lg-col-span-9 { grid-column: span 9 / span 9 }
    .lg-col-span-10{ grid-column: span 10 / span 10 }
    .lg-col-span-11{ grid-column: span 11 / span 11 }
    .lg-col-span-12{ grid-column: span 12 / span 12 }
  }
}

/* ===== UX MAGNET OPT-IN ===== */
@layer components{
  /* Magnet opt-in */
  [data-ux-magnet]{
    will-change: transform;
    transition: transform 120ms ease; /* sin 'all' */
  }
  /* enfoque accesible */
  [data-ux-magnet]:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 70%);
    outline-offset: 2px;
  }
}

/* reduce motion: no animaciones */
@media (prefers-reduced-motion: reduce){
  [data-ux-magnet]{ transition: none }
}

/* ===== SECTION CARDS SLIDER (posts) ===== */
@layer components{
  .section-cards{ margin: clamp(16px, 4vw, 28px) 0 }
  .section-cards__head{ margin-bottom: 10px }
  .section-cards__title{ margin: 0 0 4px; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem) }
  .section-cards__sub{ margin: 0; color: color-mix(in srgb, var(--ink, #222), transparent 40%) }

  .section-slider{
    position: relative;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 14px;
    background: var(--card, #fff);
    padding: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
  :root[data-theme="dark"] .section-slider{
    background: var(--card, #1E293B);
    border-color: var(--border, rgba(255,255,255,.14));
    box-shadow: 0 10px 20px rgba(255,255,255,.06);
  }

  .section-slider__viewport{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow: hidden;
    scroll-behavior: smooth;
  }

  .section-card{
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    padding: 12px;
    min-height: 180px;
  }
  .section-card__num{
    width: 28px; height: 28px; border-radius: 9999px;
    display: grid; place-items: center;
    font-weight: 800; font-size: .9rem;
    background: var(--amarillo-sol, #F9A825);
    color: #000;
  }
  .section-card__title{
    margin: 0; font-weight: 800; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  }
  .section-card__text{ margin: 0; color: var(--ink, #222) }
  :root[data-theme="dark"] .section-card__text{ color: var(--ink, #E2E8F0) }

  .section-slider__controls{
    position: absolute; inset: auto 8px 8px 8px;
    display: flex; justify-content: space-between; pointer-events: none;
  }
  .section-slider__controls .sec-prev,
  .section-slider__controls .sec-next{
    pointer-events: auto;
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff); color: var(--ink, #222); cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
  }
  .section-slider__controls .sec-prev:hover,
  .section-slider__controls .sec-next:hover{
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--azul-profundo, #1976D2), transparent 60%);
    background: color-mix(in srgb, var(--azul-profundo, #1976D2), white 94%);
  }

  .section-slider__trail{ display: grid; place-items: center; margin-top: 8px }
  .trail{ display: flex; gap: 6px }
  .trail .dot{
    width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center; font-weight: 800; font-size: .85rem;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff); color: var(--ink, #222);
    opacity: .75; transition: opacity 160ms ease, transform 120ms ease;
  }
  .trail .dot.active{ opacity: 1; transform: scale(1.02) }

  @media (max-width: 640px){
    .section-card{ min-height: 200px }
  }
}

/* ===== BREADCRUMB CON PREVIEW ===== */
@layer components{
  /* ===== Breadcrumb con preview ===== */
  .breadcrumbs{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding: 8px 0; margin-bottom: 10px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
  }
  .breadcrumbs a{
    color: var(--azul-profundo, #1976D2); text-decoration:none; font-weight:700;
    position: relative;
  }
  .breadcrumbs a:hover, .breadcrumbs a:focus-visible{
    text-decoration: underline;
  }

  /* Contenedor del preview (se inyecta una sola vez) */
  .bc-preview{
    position: absolute; z-index: 40;
    width: 260px; min-height: 70px;
    border:1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff); color: var(--ink, #222);
    border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.10);
    padding: 8px; display:none;
  }
  .bc-preview.is-on{ display:flex; gap:10px; align-items:center }
  .bc-preview__img{
    width:56px; height:56px; border-radius:10px; object-fit:cover;
    border:1px solid var(--border, rgba(0,0,0,.10));
  }
  .bc-preview__title{
    font-weight:800; font-size:.95rem; line-height:1.25; margin:0;
  }

  :root[data-theme="dark"] .bc-preview{
    background: var(--card, #1E293B); color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.14));
    box-shadow: 0 12px 24px rgba(255,255,255,.06);
  }
}

/* ===== UI SPRITE + GLASS-LITE TOKENS ===== */
@layer components{
  /* ===== Glass-lite tokens (bajo peso) ===== */
  .glass-lite{
    background: color-mix(in srgb, var(--card, #fff), transparent 8%);
    border: 1px solid color-mix(in srgb, var(--border, rgba(0,0,0,.12)), transparent 30%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
  }
  :root[data-theme="dark"] .glass-lite{
    box-shadow: 0 12px 24px rgba(255,255,255,.06);
  }

  /* Utilidades de icono inline (hereda currentColor) */
  .icon-inline{ width: 18px; height: 18px; display:inline-block; vertical-align: -2px; margin-right: 6px; color: currentColor }
  .icon-inline use{ pointer-events:none }
}

/* ===== ECO ASESOR (MVP) ===== */
@layer components{
  .ea-widget{
    /* En el listado principal del blog no usamos sticky para evitar solapes con el footer */
    position: static;
    top: auto;
    z-index: auto;
    margin: 16px 0 20px;
  }
  .ea-head{ margin: 0 0 8px }
  .ea-title{ margin: 0 0 4px; font-weight: 900; font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem) }
  .ea-sub{ margin: 0; color: color-mix(in srgb, var(--ink, #222), transparent 40%) }

  .ea-form{ display: grid; gap: 10px; margin-top: 10px }
  .ea-field{ display: grid; gap: 6px }
  .ea-label{ font-weight: 800 }
  .ea-input, .ea-check input{
    accent-color: var(--azul-profundo, #1976D2);
  }
  .ea-input{
    width: 100%; min-height: 40px; border-radius: 12px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--card, #fff); color: var(--ink, #222);
    padding: 8px 10px;
  }
  .ea-check{ display: flex; gap: 8px; align-items: center }

  .ea-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px }
  .ea-actions .btn{ min-height: 40px; border-radius: 12px; font-weight: 800 }

  .ea-output{ display: block; margin-top: 10px }
  .ea-card{
    padding: 12px; border-radius: 14px; border: 1px solid var(--border, rgba(0,0,0,.12));
  }
  .ea-out-title{ margin: 0 0 6px; font-size: clamp(1rem, .95rem + .3vw, 1.2rem) }
  .ea-out-text{ margin: 0 0 10px }

  .ea-ctas{ display: grid; gap: 8px; grid-template-columns: 1fr }
  .ea-ctas .btn{ width: 100%; justify-content: center; border-radius: 12px; min-height: 40px; font-weight: 800 }

  :root[data-theme="dark"] .ea-input{
    background: var(--card, #1E293B); color: var(--ink, #E2E8F0);
    border-color: var(--border, rgba(255,255,255,.14));
  }

  @media (max-width: 900px){
    .ea-widget{ position: static }
  }
}

/* ===== ILUSTRACIONES SVG + UTILIDADES ===== */
@layer utilities{
  /* Utilidades de ilustración (hereda currentColor) */
  .illu{ display:inline-block; color: currentColor }
  .illu use{ pointer-events:none }

  /* Tamaños comunes */
  .illu-sm { width:40px; height:40px }
  .illu-md { width:72px; height:72px }
  .illu-lg { width:120px; height:120px }

  /* Tonos de acento (opt-in) */
  .t-accent-yellow{ color: var(--amarillo-sol, #F9A825) }
  .t-accent-blue  { color: var(--azul-profundo, #1976D2) }
  .t-muted        { color: color-mix(in srgb, var(--ink,#222), transparent 40%) }
}

/* ===== HERO ILLUSTRATIONS ===== */
@layer components{
  .hero-illu{ display:flex; gap:10px; justify-content:center; margin-top:8px; opacity:.95 }
}

/* ===== POST HERO IMAGE ===== */
@layer components{
  .post-hero{ 
    margin: 2rem auto 2.5rem; 
    max-width: 1200px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .post-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }
  
  .post-hero img{ 
    display: block; 
    width: 100%; 
    height: auto;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
  }
  
  .post-hero figcaption {
    padding: 12px 16px;
    background: var(--surface, #f8f9fa);
    font-size: 0.85rem;
    color: var(--ink-light, #666);
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .post-hero {
      margin: 1.5rem auto 2rem;
      border-radius: 12px;
    }
    
    .post-hero img {
      max-height: 400px;
    }
  }
  
  @media (max-width: 480px) {
    .post-hero {
      margin: 1rem -1rem 1.5rem;
      border-radius: 0;
    }
  }
}

/* ===== MEDIA VALIDATOR (DEV) ===== */
@layer components{
  .mv-trigger{
    position: fixed; inset-inline-end: 16px; inset-block-end: 16px;
    background: var(--card); color: var(--ink); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-1); cursor: pointer;
  }
  .mv-panel{
    position: fixed; inset: 10% 5% auto 5%;
    background: var(--card); color: var(--ink); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-2); max-inline-size: 1100px; margin: 0 auto; padding: 12px;
  }
  .mv-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 8px 4px; }
  .mv-close{ background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
  .mv-body{ padding: 10px 4px; }
  .mv-note{ color: var(--muted); font-size: .9rem; }
  .mv-table{ width: 100%; border-collapse: collapse; margin-block: 10px; }
  .mv-table th, .mv-table td{ border: 1px solid var(--border); padding: 8px; text-align: left; font-size: .92rem; }
  .mv-badge{ padding: 2px 8px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--border); display: inline-block; }
  .mv-ok{ background: color-mix(in srgb, #10b981 12%, transparent); }
  .mv-bad{ background: color-mix(in srgb, #ef4444 12%, transparent); }
}

/* ===== HEADER BUTTONS ===== */
.header-actions {
  display: flex;
  gap: 12px; /* Ajusta el gap entre botones */
  align-items: center;
}

.btn-back-home,
.btn-admin {
  padding: 8px 12px; /* Ajusta el tamaño (padding) */
  font-size: 0.9rem; /* Ajusta el tamaño de fuente */
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease;
}

.btn-back-home:hover,
.btn-admin:hover {
  background: var(--green-soft);
  text-decoration: none;
}

/* ===== ESPACIADO TARJETAS → CTA (fuera de @layer para máxima especificidad) ===== */
#post-grid {
  margin-bottom: 70px;
}

.blog-cards-cta {
  margin-top: 0;
  margin-bottom: 70px;
}

/* =============================================================================
   ESTILOS PARA POSTS INDIVIDUALES
   ============================================================================= */

/* ----- Header del Post ----- */
.blog-header {
  background: linear-gradient(135deg, rgba(46,125,50,.06), rgba(25,118,210,.06));
  border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
  padding: clamp(24px, 5vw, 48px) 0;
}

.blog-header h1 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink, #212121);
  margin: 0 0 16px;
}

.blog-header .post-hero {
  margin: 20px 0 0;
  border-radius: 12px;
  overflow: hidden;
}

.blog-header .post-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ----- Header Nav y Back Link ----- */
.header-nav {
  margin-bottom: 16px;
}

.back-link,
.btn-back-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green, #2E7D32);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(46,125,50,.08), rgba(46,125,50,.04));
  border: 1px solid var(--green, #2E7D32);
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(46,125,50,.1);
}

.back-link:hover,
.btn-back-blog:hover {
  background: var(--green, #2E7D32);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(46,125,50,.25);
  transform: translateY(-2px);
}

.back-link:active,
.btn-back-blog:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px rgba(46,125,50,.15);
}

.back-link svg,
.btn-back-blog svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.back-link:hover svg,
.btn-back-blog:hover svg {
  transform: translateX(-3px);
}

/* ----- Post Nav Top Container ----- */
.post-nav-top {
  padding: 20px 0;
  margin-bottom: 10px;
}

/* ----- Estilos uniformes para Breadcrumbs ----- */
.breadcrumbs {
  background: var(--bg-alt, #f5f5f5);
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.breadcrumbs .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li a {
  color: var(--green, #2E7D32);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs li a:hover {
  color: var(--green-dark, #1B5E20);
  text-decoration: underline;
}

.breadcrumbs .separator {
  color: var(--text-muted, #666);
  font-size: 0.75rem;
}

.breadcrumbs li[aria-current="page"] {
  color: var(--text-muted, #666);
  font-weight: 500;
}

/* ----- Theme Toggle ----- */
.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--ink, #212121);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.theme-toggle:hover {
  background: var(--bg-alt, #F7F7F7);
}

/* ----- Breadcrumbs (Posts) ----- */
nav.breadcrumbs {
  background: var(--bg-alt, #F7F7F7);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-weak, rgba(0,0,0,.08));
}

nav.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

nav.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

nav.breadcrumbs li.separator {
  color: var(--muted, #757575);
}

nav.breadcrumbs a {
  color: var(--green, #2E7D32);
  text-decoration: none;
}

nav.breadcrumbs a:hover {
  text-decoration: underline;
}

nav.breadcrumbs li[aria-current="page"] {
  color: var(--muted, #757575);
  font-weight: 600;
}

/* ----- Post Nav Top ----- */
.post-nav-top {
  margin: 16px 0;
}

/* ----- Post Body (Contenido del Artículo) ----- */
.post-body {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) 0;
  line-height: 1.7;
  color: var(--ink, #212121);
}

.post-body h2 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
  margin: clamp(32px, 5vw, 48px) 0 16px;
  color: var(--ink, #212121);
  border-bottom: 2px solid var(--green, #2E7D32);
  padding-bottom: 8px;
}

.post-body h3 {
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.35rem);
  margin: 24px 0 12px;
  color: var(--ink, #212121);
}

.post-body p {
  margin: 0 0 16px;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

.post-body ul,
.post-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

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

.post-body a {
  color: var(--green, #2E7D32);
  text-decoration: underline;
}

.post-body a:hover {
  color: var(--blue, #1976D2);
}

/* ----- Post Header y Lead ----- */
.post-hdr {
  margin-bottom: 32px;
}

.post-hdr h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 16px;
}

.post-lead {
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--muted, #757575);
  background: var(--bg-alt, #F7F7F7);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid var(--green, #2E7D32);
}

.post-meta {
  font-size: 0.85rem;
  color: var(--muted, #757575);
  margin-top: 12px;
}

/* ----- Figuras e Imágenes ----- */
.post-body figure,
.media-box {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
}

.post-body figure img,
.media-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.post-body figcaption,
.media-box figcaption {
  font-size: 0.85rem;
  color: var(--muted, #757575);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* ----- Tablas ----- */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.9rem;
}

.post-body table th,
.post-body table td {
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--border, rgba(0,0,0,.12));
}

.post-body table thead {
  background: var(--green, #2E7D32);
  color: #fff;
}

.post-body table thead th {
  font-weight: 700;
  border-color: var(--green, #2E7D32);
}

.post-body table tbody tr:nth-child(even) {
  background: var(--bg-alt, #F7F7F7);
}

.post-body table tfoot {
  background: var(--bg-alt, #F7F7F7);
  font-weight: 600;
}

.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- FAQ / Details ----- */
.post-body details {
  margin: 12px 0;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 10px;
  overflow: hidden;
}

.post-body details summary {
  padding: 14px 16px;
  background: var(--bg-alt, #F7F7F7);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-body details summary::-webkit-details-marker {
  display: none;
}

.post-body details summary:not(.post-faq__question)::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #2E7D32);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.post-body details[open] summary:not(.post-faq__question)::before {
  content: '−';
  transform: rotate(180deg);
}

.post-body details p {
  padding: 14px 16px;
  margin: 0;
  background: var(--card, #fff);
}


/* ----- Utilidades ----- */
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.pl-6 { padding-left: 1.5rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.underline { text-decoration: underline; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.w-full { width: 100%; }
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----- Responsive Posts ----- */
@media (max-width: 768px) {
  .blog-header {
    padding: 20px 0;
  }
  
  .blog-header h1 {
    font-size: 1.5rem;
  }
  
  .theme-toggle {
    position: static;
    margin-top: 12px;
  }
  
  .post-body {
    padding: 16px 0;
  }
  
  .post-body table {
    font-size: 0.8rem;
  }
  
  .post-body table th,
  .post-body table td {
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .back-link {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
  
  nav.breadcrumbs ol {
    font-size: 0.8rem;
  }
  
  .post-lead {
    padding: 12px 14px;
  }
}

/* =====================================================
   ESTRUCTURA DE POSTS - LECTURA ÁGIL, SEO Y CONVERSIÓN
   ===================================================== */

/* ----- Barra de Progreso de Lectura ----- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, var(--green, #2E7D32) 0%, #4CAF50 50%, #81C784 100%);
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 1px 4px rgba(46, 125, 50, 0.3);
}

/* ----- 1. HERO DE IMPACTO (Above the fold) ----- */
.post-hero-section {
  padding: 3rem 0 2.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(46, 125, 50, 0.1);
}

.post-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.05) 100%);
  color: var(--green, #2E7D32);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  border: 1px solid rgba(46, 125, 50, 0.2);
}

.post-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-light, #666);
  font-size: 0.85rem;
  margin-left: 12px;
}

.post-reading-time svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Título H1 - Claro, provocador */
.post-hero-section h1,
.post-hdr h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink, #1a1a1a);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

/* Subtítulo - Contextualiza rápido */
.post-hero-section .post-subtitle,
.post-hdr .post-lead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--ink-light, #555);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 680px;
}

/* CTA suave */
.post-cta-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--green, #2E7D32);
  padding: 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: gap 0.2s ease;
}

.post-cta-soft:hover {
  gap: 12px;
}

.post-cta-soft svg {
  width: 16px;
  height: 16px;
}

/* Imagen Hero */
.post-hero-image {
  margin: 2rem 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.post-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.post-hero-image figcaption {
  padding: 12px 16px;
  background: var(--surface, #f8f9fa);
  font-size: 0.8rem;
  color: var(--ink-light, #666);
  text-align: center;
}

/* ----- HERO CON TÍTULO CENTRADO SOBRE IMAGEN ----- */
.post-hero-overlay {
  position: relative;
  margin: 0 -1rem 2rem;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .post-hero-overlay {
    margin: 0 0 2.5rem;
    border-radius: 20px;
  }
}

.post-hero-overlay__img {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  max-height: 600px;
  object-fit: cover;
  display: block;
  object-position: center;
}

.post-hero-overlay__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  border-radius: inherit;
}

.post-hero-overlay__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.post-hero-overlay__title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  max-width: 800px;
}

.post-hero-overlay__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  max-width: 600px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.post-hero-overlay__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--green, #2E7D32);
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-decoration: none;
}

.post-hero-overlay__cta:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.post-hero-overlay__cta svg {
  width: 16px;
  height: 16px;
}

/* ----- SECCIÓN 5W (Hook narrativo mejorado) ----- */
.post-5w {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .post-5w {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .post-5w {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-5w__item {
  background: linear-gradient(135deg, #f8fdf8 0%, #fff 100%);
  border: 1px solid rgba(46, 125, 50, 0.12);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}

.post-5w__item:hover {
  border-color: rgba(46, 125, 50, 0.3);
  box-shadow: 0 4px 20px rgba(46, 125, 50, 0.08);
  transform: translateY(-2px);
}

.post-5w__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green, #2E7D32);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.post-5w__label svg {
  width: 14px;
  height: 14px;
}

.post-5w__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink, #1a1a1a);
  margin: 0;
}

.post-5w__text strong {
  color: var(--green, #2E7D32);
}

/* Variantes de color para cada W */
.post-5w__item--que .post-5w__label { background: #2E7D32; }
.post-5w__item--porque .post-5w__label { background: #1565C0; }
.post-5w__item--quien .post-5w__label { background: #7B1FA2; }
.post-5w__item--cuando .post-5w__label { background: #E65100; }
.post-5w__item--donde .post-5w__label { background: #C62828; }
.post-5w__item--como .post-5w__label { background: #00838F; }

[data-theme="dark"] .post-5w__item {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(30, 30, 30, 1) 100%);
  border-color: rgba(46, 125, 50, 0.2);
}

[data-theme="dark"] .post-5w__text {
  color: rgba(255, 255, 255, 0.9);
}

/* ----- 2. ÍNDICE DE CONTENIDO ----- */
.post-toc {
  background: linear-gradient(135deg, #f8fdf8 0%, #f0f9f0 100%);
  border: 1px solid rgba(46, 125, 50, 0.15);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}

.post-toc-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green, #2E7D32);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-counter;
}

.post-toc li {
  counter-increment: toc-counter;
  margin: 0.5rem 0;
}

.post-toc li a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink, #333);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 6px 0;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.post-toc li a::before {
  content: counter(toc-counter, decimal-leading-zero);
  color: var(--green, #2E7D32);
  font-weight: 600;
  font-size: 0.8rem;
  opacity: 0.7;
}

.post-toc li a:hover {
  color: var(--green, #2E7D32);
  padding-left: 8px;
}

/* ----- 3. HOOK NARRATIVO (5W) ----- */
.post-hook {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}

.post-hook p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink, #333);
}

.post-hook strong {
  color: #b45309;
}

/* ----- 4. DESARROLLO/CONTENIDO ----- */
/* Tipografía cómoda y mucho aire */
.post-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink, #333);
}

.post-content > * {
  margin-bottom: 1.5rem;
}

/* H2 - Subtítulos fuertes, accionables */
.post-content h2 {
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 3rem 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.3;
}

.post-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* H3 - Subsubtítulos */
.post-content h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: var(--ink, #222);
  margin: 2rem 0 1rem;
  line-height: 1.4;
}

/* Párrafos - Texto corto, directo */
.post-content p {
  margin: 0 0 1.25rem;
}

/* Negritas estratégicas */
.post-content strong {
  font-weight: 700;
  color: var(--ink-dark, #111);
}

/* Listas con estilo */
.post-content ul,
.post-content ol {
  margin: 1.25rem 0;
  padding-left: 0;
}

.post-content li {
  position: relative;
  padding-left: 1.75rem;
  margin: 0.75rem 0;
  line-height: 1.7;
}

.post-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--green, #2E7D32);
  border-radius: 50%;
}

.post-content ol {
  counter-reset: list-counter;
}

.post-content ol li {
  counter-increment: list-counter;
}

.post-content ol li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--green, #2E7D32);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bloques especiales: Problema, Error, Insight, Enfoque, Ejemplo */
.post-block {
  background: var(--surface, #f8f9fa);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: none !important;
  align-items: flex-start;
}

.post-block > * {
  width: 100%;
}

.post-block__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 1rem;
}

.post-block__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.post-block__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

.post-block__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  color: inherit;
}

.post-block__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.post-block__text {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.post-block__text strong {
  font-weight: 600;
}

.post-block__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.post-block__list li {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.post-block__list li:last-child {
  margin-bottom: 0;
}

.post-block__list li strong {
  font-weight: 600;
  color: var(--green, #2E7D32);
}

/* Problema real */
.post-block--problema {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-left: 4px solid #dc2626;
}
.post-block--problema .post-block__icon {
  background: #dc2626;
  color: #fff;
}
.post-block--problema .post-block__label {
  color: #dc2626;
}
.post-block--problema .post-block__title {
  color: #991b1b;
}

/* Error común */
.post-block--error {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-left: 4px solid #ea580c;
}
.post-block--error .post-block__icon {
  background: #ea580c;
  color: #fff;
}
.post-block--error .post-block__label {
  color: #ea580c;
}
.post-block--error .post-block__title {
  color: #9a3412;
}

/* Advertencia / Precaución (amarillo) */
.post-block--warning {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border-left: 4px solid #ca8a04;
}
.post-block--warning .post-block__icon {
  background: #ca8a04;
  color: #fff;
}
.post-block--warning .post-block__label {
  color: #a16207;
}
.post-block--warning .post-block__title {
  color: #854d0e;
}

/* Insight clave */
.post-block--insight {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left: 4px solid #16a34a;
}
.post-block--insight .post-block__icon {
  background: #16a34a;
  color: #fff;
}
.post-block--insight .post-block__label {
  color: #16a34a;
}
.post-block--insight .post-block__title {
  color: #166534;
}

/* Enfoque moderno */
.post-block--enfoque {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-left: 4px solid #9333ea;
}
.post-block--enfoque .post-block__icon {
  background: #9333ea;
  color: #fff;
}
.post-block--enfoque .post-block__label {
  color: #9333ea;
}
.post-block--enfoque .post-block__title {
  color: #6b21a8;
}

/* Ejemplo práctico */
.post-block--ejemplo {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 4px solid #2563eb;
}
.post-block--ejemplo .post-block__icon {
  background: #2563eb;
  color: #fff;
}
.post-block--ejemplo .post-block__label {
  color: #2563eb;
}
.post-block--ejemplo .post-block__title {
  color: #1e40af;
}

/* Dark mode para bloques */
[data-theme="dark"] .post-block--problema {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
}
[data-theme="dark"] .post-block--error {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1) 0%, rgba(234, 88, 12, 0.05) 100%);
}
[data-theme="dark"] .post-block--warning {
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.1) 0%, rgba(202, 138, 4, 0.05) 100%);
}
[data-theme="dark"] .post-block--insight {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%);
}
[data-theme="dark"] .post-block--enfoque {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%);
}
[data-theme="dark"] .post-block--ejemplo {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}
[data-theme="dark"] .post-block__title,
[data-theme="dark"] .post-block__text {
  color: rgba(255, 255, 255, 0.9);
}

/* ----- ETAPAS / PASOS NUMERADOS ----- */
.post-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .post-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.post-step {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.post-step:hover {
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.1);
}

.post-step__num {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--green, #2E7D32) 0%, #4CAF50 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.post-step__content {
  flex: 1;
}

.post-step__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 0 0 0.5rem;
}

.post-step__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-light, #555);
  margin: 0;
}

.post-step__list {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-light, #555);
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.post-step__list li {
  margin-bottom: 0.35rem;
}
.post-step__list li:last-child {
  margin-bottom: 0;
}

[data-theme="dark"] .post-step {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-step__title {
  color: #fff;
}

[data-theme="dark"] .post-step__text,
[data-theme="dark"] .post-step__list {
  color: rgba(255, 255, 255, 0.7);
}

/* ----- TARJETAS DE OBJETIVOS/BENEFICIOS ----- */
.post-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

@media (min-width: 640px) {
  .post-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.post-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.post-card:hover {
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.08);
  transform: translateY(-2px);
}

.post-card__icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.05) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.post-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--green, #2E7D32);
}

.post-card__content {
  flex: 1;
}

.post-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 0 0 0.35rem;
}

.post-card__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-light, #555);
  margin: 0;
}

.post-card__scores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.post-card__scores li {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-light, #555);
}

.post-card__scores li strong {
  color: var(--green, #2E7D32);
  font-weight: 600;
  min-width: 1.5rem;
  display: inline-block;
}

/* Variante para beneficios (azul) */
.post-card--benefit .post-card__icon {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
}

.post-card--benefit .post-card__icon svg {
  color: #2563eb;
}

.post-card--benefit:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
}

/* Variante para errores (rojo) */
.post-card--error {
  border-color: rgba(220, 38, 38, 0.2);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.5) 0%, #fff 100%);
}

.post-card--error .post-card__icon {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.post-card--error .post-card__icon svg {
  color: #dc2626;
}

.post-card--error:hover {
  border-color: #dc2626;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.12);
}

[data-theme="dark"] .post-card--error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .post-card--error .post-card__icon {
  background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .post-card--error .post-card__icon svg {
  color: #f87171;
}

[data-theme="dark"] .post-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-card__title {
  color: #fff;
}

[data-theme="dark"] .post-card__text {
  color: rgba(255, 255, 255, 0.7);
}

/* ----- FASES DEL PROCESO ----- */
.post-phases {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.post-phase {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.post-phase::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--phase-color, var(--green, #2E7D32));
}

.post-phase__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.post-phase__num {
  width: 48px;
  height: 48px;
  background: var(--phase-color, var(--green, #2E7D32));
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.post-phase__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 0;
}

.post-phase__subtitle {
  font-size: 0.85rem;
  color: var(--ink-light, #666);
  margin: 0.25rem 0 0;
}

.post-phase__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-phase__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  padding: 1rem;
}

.post-phase__icon {
  display: none;
}

.post-phase__text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
  margin: 0;
}

/* Colores por fase */
.post-phase--plan { --phase-color: #2E7D32; }
.post-phase--establish { --phase-color: #0891b2; }
.post-phase--maintain { --phase-color: #7c3aed; }
.post-phase--renew { --phase-color: #ea580c; }


[data-theme="dark"] .post-phase {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-phase__title {
  color: #fff;
}

[data-theme="dark"] .post-phase__item {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .post-phase__text {
  color: rgba(255, 255, 255, 0.85);
}

/* ----- TABLA DE MATRIZ ----- */
.post-table-wrapper {
  margin: 2rem 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.post-table thead {
  background: linear-gradient(135deg, var(--green, #2E7D32) 0%, #4CAF50 100%);
  color: #fff;
}

.post-table th {
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.post-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

.post-table tbody tr:last-child td {
  border-bottom: none;
}

.post-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.post-table tbody tr:hover {
  background: rgba(46, 125, 50, 0.05);
}

.post-table__var {
  font-weight: 700;
  color: var(--green, #2E7D32);
}

.post-table__score {
  text-align: center;
  font-weight: 600;
  background: rgba(46, 125, 50, 0.1);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  min-width: 40px;
}

.post-table tfoot {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.post-table tfoot td {
  padding: 1.25rem;
  font-size: 0.9rem;
  border-bottom: none;
}

.post-table__rule {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.post-table__rule-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.post-table__rule-item--high {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.post-table__rule-item--medium {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.post-table__rule-item--low {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

[data-theme="dark"] .post-table-wrapper {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-table td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .post-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .post-table tbody tr:hover {
  background: rgba(46, 125, 50, 0.1);
}

[data-theme="dark"] .post-table tfoot {
  background: rgba(255, 255, 255, 0.05);
}

/* ----- 5. PUNTO DE VISTA (Opinión) ----- */
.post-opinion {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #fff;
  border-radius: 16px;
  padding: 2rem 2.5rem;
  margin: 3rem 0;
  position: relative;
}

.post-opinion::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: var(--green, #4CAF50);
  opacity: 0.3;
  line-height: 1;
}

.post-opinion h3 {
  color: var(--green-light, #81C784);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.post-opinion p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.post-opinion p:last-child {
  margin-bottom: 0;
}

/* ----- 6. CIERRE CON INSIGHT ----- */
.post-cierre {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid var(--green, #2E7D32);
  border-radius: 16px;
  padding: 2rem;
  margin: 3rem 0;
  text-align: center;
}

.post-cierre h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green-dark, #1B5E20);
  margin: 0 0 1rem;
  border: none;
  padding: 0;
}

.post-cierre p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink, #333);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- 7. FAQ ACORDEÓN ----- */
/* Estilos eliminados - usar .post-faq__item en su lugar */

/* ----- 8. NAVEGACIÓN ANTERIOR/SIGUIENTE ----- */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  background: var(--surface, #f8f9fa);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.post-nav-item:hover {
  background: #fff;
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 16px rgba(46, 125, 50, 0.1);
  transform: translateY(-2px);
}

.post-nav-item--prev {
  align-items: flex-start;
}

.post-nav-item--next {
  align-items: flex-end;
  text-align: right;
}

.post-nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green, #2E7D32);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-nav-label svg {
  width: 14px;
  height: 14px;
}

.post-nav-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #333);
  line-height: 1.4;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 768px) {
  .post-hero-section {
    padding: 2rem 0 1.5rem;
  }
  
  .post-toc {
    padding: 1.25rem 1.5rem;
  }
  
  .post-hook,
  .post-opinion,
  .post-cierre {
    padding: 1.25rem 1.5rem;
  }
  
  .post-opinion::before {
    font-size: 3rem;
    top: -5px;
    left: 15px;
  }
  
  .post-navigation {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .post-nav-item--next {
    align-items: flex-start;
    text-align: left;
  }
  
  .post-content h2 {
    margin: 2rem 0 1rem;
  }
  
  .post-content li {
    padding-left: 1.5rem;
  }
}

@media (max-width: 480px) {
  .post-category-tag {
    font-size: 0.7rem;
    padding: 5px 10px;
  }
  
  .post-reading-time {
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }
  
  .post-faq summary {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .post-faq .faq-answer {
    padding: 0 1.25rem 1rem 3rem;
  }
}

/* ============================================
   NAVEGACIÓN ENTRE POSTS (Anterior / Siguiente)
   ============================================ */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 3rem 0;
  padding: 0;
}

.post-nav__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  padding: 1.25rem 1.5rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.post-nav__link:hover {
  background: #fff;
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
  transform: translateY(-2px);
}

.post-nav__prev {
  text-align: left;
}

.post-nav__next {
  text-align: right;
  justify-content: flex-end;
}

/* Navegación con un solo botón */
.post-navigation--next-only {
  justify-content: flex-end;
}

.post-navigation--prev-only {
  justify-content: flex-start;
}

.post-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--green, #2E7D32);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.post-nav__arrow svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.post-nav__link:hover .post-nav__arrow {
  transform: scale(1.1);
}

.post-nav__prev:hover .post-nav__arrow {
  transform: scale(1.1) translateX(-3px);
}

.post-nav__next:hover .post-nav__arrow {
  transform: scale(1.1) translateX(3px);
}

.post-nav__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.post-nav__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  font-weight: 500;
}

.post-nav__title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}

.post-nav__link:hover .post-nav__title {
  color: var(--green, #2E7D32);
}

/* Responsive */
@media (max-width: 768px) {
  .post-navigation {
    flex-direction: column;
    gap: 1rem;
  }
  
  .post-nav__next {
    text-align: left;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }
}

/* Dark mode */
[data-theme="dark"] .post-nav__link {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-nav__label {
  color: #adb5bd;
}

[data-theme="dark"] .post-nav__title {
  color: #f8f9fa;
}

[data-theme="dark"] .post-nav__link:hover .post-nav__title {
  color: var(--green, #4CAF50);
}

/* ----- NAVEGACIÓN ENTRE ARTÍCULOS (BEM) ----- */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 3rem 0 2rem;
  padding: 0 1rem;
}

.post-navigation__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  max-width: 48%;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.post-navigation__link:hover {
  background: #fff;
  border-color: var(--green, #2E7D32);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.15);
  transform: translateY(-3px);
}

.post-navigation__link--prev {
  align-items: flex-start;
}

.post-navigation__link--next {
  align-items: flex-end;
  margin-left: auto;
}

.post-navigation__direction {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green, #2E7D32);
  font-weight: 600;
}

.post-navigation__direction svg {
  width: 18px;
  height: 18px;
  stroke: var(--green, #2E7D32);
  transition: transform 0.3s ease;
}

.post-navigation__link--prev:hover .post-navigation__direction svg {
  transform: translateX(-4px);
}

.post-navigation__link--next:hover .post-navigation__direction svg {
  transform: translateX(4px);
}

.post-navigation__title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.post-navigation__link:hover .post-navigation__title {
  color: var(--green, #2E7D32);
}

/* Responsive navegación artículos */
@media (max-width: 768px) {
  .post-navigation {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
  }
  
  .post-navigation__link {
    max-width: 100%;
  }
  
  .post-navigation__link--next {
    align-items: flex-start;
    flex-direction: column;
  }
  
  .post-navigation__link--next .post-navigation__direction {
    flex-direction: row-reverse;
  }
}

/* Dark mode navegación artículos */
[data-theme="dark"] .post-navigation__link {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-navigation__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-navigation__direction {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-navigation__direction svg {
  stroke: var(--green, #4CAF50);
}

[data-theme="dark"] .post-navigation__title {
  color: #f8f9fa;
}

[data-theme="dark"] .post-navigation__link:hover .post-navigation__title {
  color: var(--green, #4CAF50);
}

/* ----- MATRIZ DE DECISIÓN ----- */
.post-matrix {
  margin: 2rem 0;
}

.post-matrix__intro {
  background: linear-gradient(135deg, rgba(46,125,50,0.1) 0%, rgba(46,125,50,0.05) 100%);
  border-left: 4px solid var(--green, #2E7D32);
  padding: 1.5rem 1.75rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.08);
}

.post-matrix__intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink, #1a1a1a);
}

.post-matrix__intro strong {
  color: var(--green, #2E7D32);
  font-weight: 700;
  background: rgba(46, 125, 50, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.post-matrix__table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.5rem 0 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.post-matrix__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.95rem;
  border-radius: 16px;
  overflow: hidden;
}

.post-matrix__table thead {
  background: linear-gradient(135deg, var(--green, #2E7D32) 0%, #1B5E20 100%);
  position: relative;
}

.post-matrix__table thead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.post-matrix__table thead th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 700;
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: relative;
  border: none;
}

.post-matrix__table thead th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.post-matrix__table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.post-matrix__table tbody tr:hover {
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.04) 0%, rgba(46, 125, 50, 0.08) 50%, rgba(46, 125, 50, 0.04) 100%);
}

.post-matrix__table tbody tr:last-child {
  border-bottom: none;
}

.post-matrix__table tbody td {
  padding: 1.15rem 1.5rem;
  color: var(--ink, #1a1a1a);
  line-height: 1.6;
  vertical-align: middle;
  border: none;
}

.post-matrix__table tbody td:first-child {
  font-weight: 700;
  color: var(--green, #2E7D32);
  font-size: 1rem;
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.06) 0%, transparent 100%);
}

.post-matrix__table tbody td:nth-child(2) {
  color: var(--ink-light, #555);
  font-size: 0.9rem;
}

.post-matrix__table tbody td:nth-child(3) {
  text-align: center;
  font-weight: 700;
  color: var(--green, #2E7D32);
  background: rgba(46, 125, 50, 0.1);
  font-size: 1.05rem;
  min-width: 80px;
}

.post-matrix__table tbody td:nth-child(4) {
  font-size: 0.9rem;
  color: var(--ink, #333);
}

.post-matrix__table tfoot {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(46, 125, 50, 0.04) 100%);
}

.post-matrix__table tfoot td {
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-light, #555);
  font-style: italic;
  line-height: 1.6;
  border: none;
}

.post-matrix__table tfoot strong {
  font-weight: 700;
  color: var(--green, #2E7D32);
  font-style: normal;
}

/* Responsive para matriz */
@media (max-width: 768px) {
  .post-matrix__table {
    font-size: 0.85rem;
  }
  
  .post-matrix__table thead th,
  .post-matrix__table tbody td,
  .post-matrix__table tfoot td {
    padding: 0.75rem 0.85rem;
  }
  
  .post-matrix__intro {
    padding: 1rem 1.25rem;
  }
}

/* Dark mode para matriz */
[data-theme="dark"] .post-matrix__intro {
  background: rgba(46, 125, 50, 0.15);
  border-left-color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-matrix__intro p {
  color: #f8f9fa;
}

[data-theme="dark"] .post-matrix__intro strong {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-matrix__table {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .post-matrix__table thead {
  background: linear-gradient(135deg, var(--green, #2E7D32) 0%, #1B5E20 100%);
}

[data-theme="dark"] .post-matrix__table tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-matrix__table tbody tr:hover {
  background-color: rgba(76, 175, 80, 0.1);
}

[data-theme="dark"] .post-matrix__table tbody td {
  color: #f8f9fa;
}

[data-theme="dark"] .post-matrix__table tbody td:first-child {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-matrix__table tbody td:nth-child(3) {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-matrix__table tfoot {
  background: rgba(76, 175, 80, 0.08);
}

[data-theme="dark"] .post-matrix__table tfoot td {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .post-matrix__table tfoot strong {
  color: var(--green, #4CAF50);
}

/* ----- FAQ / PREGUNTAS FRECUENTES ----- */
.post-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.post-faq__item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.post-faq__item:hover {
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.08);
}

.post-faq__item[open] {
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 20px rgba(46, 125, 50, 0.12);
}

.post-faq__question {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  list-style: none;
  transition: all 0.2s ease;
}

.post-faq__question::-webkit-details-marker {
  display: none;
}

/* Icono del acordeón FAQ */
.post-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: rgba(46, 125, 50, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 300;
  font-family: Arial, sans-serif;
  color: var(--green, #2E7D32);
  transition: all 0.3s ease;
}

.post-faq__icon::before {
  content: '+';
  line-height: 1;
}

.post-faq__item[open] .post-faq__icon::before {
  content: '−';
}

.post-faq__question:hover {
  color: var(--green, #2E7D32);
}

.post-faq__answer {
  padding: 0 1.5rem 1rem 4rem;
  animation: faqSlideDown 0.3s ease;
}

@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-faq__answer p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-light, #555);
  margin: 0 0 0.75rem;
}

.post-faq__answer p:last-child {
  margin-bottom: 0;
}

.post-faq__answer ul {
  margin: 0.75rem 0;
  padding-left: 0;
  list-style: none;
}

.post-faq__answer ul li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-light, #555);
  margin-bottom: 0.35rem;
  padding-left: 1.25rem;
  position: relative;
}

.post-faq__answer ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--green, #2E7D32);
  border-radius: 50%;
}

.post-faq__answer ul li:last-child {
  margin-bottom: 0;
}

.post-faq__answer strong {
  color: var(--green, #2E7D32);
  font-weight: 600;
}

/* Responsive FAQ */
@media (max-width: 640px) {
  .post-faq__question {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
  }
  
  .post-faq__answer {
    padding: 0 1.25rem 1.25rem 3.5rem;
  }
}

/* Responsive post-block para móviles */
@media (max-width: 768px) {
  .post-block {
    padding: 1.25rem 1rem;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    grid-template-columns: none !important;
    align-items: flex-start;
  }
  
  .post-block > * {
    width: 100%;
  }
  
  .post-block__header {
    margin-bottom: 0.75rem;
    gap: 6px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .post-block__icon {
    width: 28px;
    height: 28px;
  }
  
  .post-block__icon svg {
    width: 16px;
    height: 16px;
  }
  
  .post-block__label {
    font-size: 0.7rem;
    display: block;
    color: inherit;
  }
  
  .post-block__title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    line-height: 1.3;
  }
  
  .post-block__text {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  .post-block__list li {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }
}

@media (max-width: 480px) {
  .post-block {
    padding: 1rem 0.75rem;
    margin: 1rem 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    grid-template-columns: none !important;
    align-items: flex-start;
  }
  
  .post-block > * {
    width: 100%;
  }
  
  .post-block__header {
    margin-bottom: 0.5rem;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .post-block__icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }
  
  .post-block__icon svg {
    width: 14px;
    height: 14px;
  }
  
  .post-block__label {
    font-size: 0.65rem;
    display: block;
    color: inherit;
  }
  
  .post-block__title {
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
  }
  
  .post-block__text {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  .post-block__list li {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
  }
}

/* Dark mode FAQ */
[data-theme="dark"] .post-faq__item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .post-faq__item:hover,
[data-theme="dark"] .post-faq__item[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-faq__question {
  color: #f8f9fa;
}

[data-theme="dark"] .post-faq__icon {
  background: rgba(76, 175, 80, 0.2);
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .post-faq__answer p,
[data-theme="dark"] .post-faq__answer ul li {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .post-faq__answer strong {
  color: var(--green, #4CAF50);
}

/* ----- ESTILOS PARA SECCIÓN DE TÉCNICA DE PODA ----- */
.poda-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .poda-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .poda-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.poda-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poda-card:hover {
  border-color: var(--green, #2E7D32);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.08);
  transform: translateY(-2px);
}

.poda-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.poda-card__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.05) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.poda-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--green, #2E7D32);
}

.poda-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.poda-card__subtitle {
  font-size: 0.875rem;
  color: var(--green, #2E7D32);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.poda-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.poda-card__description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-light, #555);
  margin: 0;
}

.poda-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.poda-card__features li {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-light, #555);
  padding-left: 1.5rem;
  position: relative;
}

.poda-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green, #2E7D32);
  font-weight: 700;
}

.poda-card__features li strong {
  color: var(--ink, #1a1a1a);
  font-weight: 600;
}

/* Tarjeta de consejo profesional */
.poda-tip-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  border-left: 4px solid var(--green, #2E7D32);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.poda-tip-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.poda-tip-card__icon {
  width: 40px;
  height: 40px;
  background: var(--green, #2E7D32);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.poda-tip-card__icon svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.poda-tip-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green, #2E7D32);
  margin: 0;
}

.poda-tip-card__content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #166534;
  margin: 0;
}

/* Dark mode para tarjetas de poda */
[data-theme="dark"] .poda-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .poda-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--green, #4CAF50);
}

[data-theme="dark"] .poda-card__title {
  color: #f8f9fa;
}

[data-theme="dark"] .poda-card__subtitle {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .poda-card__description,
[data-theme="dark"] .poda-card__features li {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .poda-card__features li::before {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .poda-tip-card {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
  border-color: rgba(76, 175, 80, 0.3);
}

[data-theme="dark"] .poda-tip-card__title {
  color: var(--green, #4CAF50);
}

[data-theme="dark"] .poda-tip-card__content {
  color: rgba(255, 255, 255, 0.8);
}