/* ═══ Hero de Planes Educativos ═══ */
      .pe-pub-hero {
        background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #7c3aed 100%);
        color: #fff;
        padding: 4rem 0 5rem;
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
      }
      .pe-pub-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(167,139,250,.2), transparent 60%),
                          radial-gradient(circle at 80% 70%, rgba(196,181,253,.15), transparent 60%);
        pointer-events: none;
      }
      .pe-pub-hero .container { position: relative; z-index: 2; max-width: 1100px; }
      .pe-pub-hero-eyebrow {
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .15em;
        color: #c4b5fd;
        margin-bottom: 1rem;
      }
      .pe-pub-hero h1 {
        font-family: 'Fraunces', serif;
        font-size: clamp(2.2rem, 5vw, 3.5rem);
        font-weight: 600;
        line-height: 1.1;
        margin: 0 0 1rem;
        max-width: 800px;
      }
      .pe-pub-hero p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: rgba(255,255,255,.85);
        max-width: 700px;
        margin: 0 0 2rem;
      }
      .pe-pub-hero-stats {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
      }
      .pe-pub-hero-stat strong {
        display: block;
        font-family: 'Fraunces', serif;
        font-size: 2rem;
        color: #fde68a;
        font-weight: 700;
      }
      .pe-pub-hero-stat span {
        font-size: .82rem;
        color: rgba(255,255,255,.75);
        text-transform: uppercase;
        letter-spacing: .08em;
      }

      /* ═══ Filtros ═══ */
      .pe-pub-filters {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 1rem 0;
        position: sticky;
        top: 0;
        z-index: 30;
      }
      .pe-pub-filters .container {
        display: flex;
        gap: .85rem;
        align-items: center;
        flex-wrap: wrap;
      }
      .pe-pub-filter-btn {
        padding: .5rem 1rem;
        background: transparent;
        border: 1.5px solid var(--border);
        border-radius: 999px;
        color: var(--text-muted);
        font-size: .85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
      }
      .pe-pub-filter-btn:hover { background: rgba(124,58,237,.06); }
      .pe-pub-filter-btn.active {
        background: linear-gradient(135deg, #4c1d95, #7c3aed);
        color: #fff;
        border-color: transparent;
      }

      /* ═══ Grid de cards ═══ */
      .pe-pub-grid-section { padding: 3rem 0 4rem; background: var(--bg); }
      .pe-pub-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.5rem;
      }
      .pe-pub-card {
        background: var(--surface);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        transition: all .25s;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border);
      }
      .pe-pub-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(124,58,237,.18);
        border-color: #7c3aed;
      }
      .pe-pub-card.destacado { border: 2px solid #fbbf24; }
      .pe-pub-card-img {
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
      }
      .pe-pub-card-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6));
      }
      .pe-pub-card-badges {
        position: absolute;
        top: 1rem;
        left: 1rem;
        display: flex;
        gap: .35rem;
        z-index: 2;
      }
      .pe-pub-card-badge {
        background: rgba(255,255,255,.95);
        color: #4c1d95;
        font-size: .7rem;
        font-weight: 700;
        padding: .25rem .65rem;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: .05em;
        backdrop-filter: blur(4px);
      }
      .pe-pub-card-badge.destacado {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #fff;
      }
      .pe-pub-card-icon {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 56px;
        height: 56px;
        background: rgba(255,255,255,.95);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        z-index: 2;
        box-shadow: 0 4px 12px rgba(0,0,0,.2);
      }
      .pe-pub-card-body {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .75rem;
      }
      .pe-pub-card-title {
        font-family: 'Fraunces', serif;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--text);
        line-height: 1.25;
      }
      .pe-pub-card-resumen {
        font-size: .9rem;
        color: var(--text-muted);
        line-height: 1.55;
        flex: 1;
      }
      .pe-pub-card-meta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        padding-top: .75rem;
        border-top: 1px solid var(--border);
        font-size: .8rem;
        color: var(--text-faint);
      }
      .pe-pub-card-meta i { color: #7c3aed; margin-right: .35rem; }
      .pe-pub-card-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .85rem 1.5rem;
        background: var(--bg);
        border-top: 1px solid var(--border);
        font-weight: 600;
        font-size: .88rem;
        color: #7c3aed;
        transition: all .15s;
      }
      .pe-pub-card:hover .pe-pub-card-cta {
        background: linear-gradient(135deg, #4c1d95, #7c3aed);
        color: #fff;
      }
      .pe-pub-card-cta i { transition: transform .2s; }
      .pe-pub-card:hover .pe-pub-card-cta i { transform: translateX(4px); }

      /* ═══ Modal de detalle ═══ */
      .pe-pub-modal {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.75);
        backdrop-filter: blur(8px);
        z-index: 9000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 1rem;
        overflow-y: auto;
      }
      .pe-pub-modal.open { display: flex; }
      .pe-pub-modal-content {
        background: var(--bg);
        border-radius: 20px;
        max-width: 1000px;
        width: 100%;
        overflow: hidden;
        animation: peModalIn .3s ease-out;
        margin-bottom: 4rem;
      }
      @keyframes peModalIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .pe-pub-modal-hero {
        height: 280px;
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 2rem;
      }
      .pe-pub-modal-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85));
      }
      .pe-pub-modal-hero-content { position: relative; z-index: 2; color: #fff; flex: 1; }
      .pe-pub-modal-hero h2 {
        font-family: 'Fraunces', serif;
        font-size: clamp(1.6rem, 4vw, 2.4rem);
        margin: 0 0 .5rem;
        color: #fff;
        line-height: 1.15;
      }
      .pe-pub-modal-hero-meta {
        display: flex;
        gap: 1.25rem;
        flex-wrap: wrap;
        font-size: .88rem;
        color: rgba(255,255,255,.85);
      }
      .pe-pub-modal-hero-meta i { color: #fde68a; margin-right: .3rem; }
      .pe-pub-modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 42px;
        height: 42px;
        background: rgba(0,0,0,.5);
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        z-index: 3;
        backdrop-filter: blur(4px);
      }
      .pe-pub-modal-close:hover { background: rgba(0,0,0,.8); }
      .pe-pub-modal-body { padding: 2rem; }

      /* Tabs internos del modal */
      .pe-pub-modal-tabs {
        display: flex;
        gap: .25rem;
        border-bottom: 2px solid var(--border);
        margin-bottom: 1.5rem;
        overflow-x: auto;
      }
      .pe-pub-modal-tab {
        padding: .75rem 1.25rem;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        color: var(--text-muted);
        font-weight: 600;
        font-size: .9rem;
        white-space: nowrap;
        font-family: inherit;
      }
      .pe-pub-modal-tab.active {
        color: #7c3aed;
        border-bottom-color: #7c3aed;
      }
      .pe-pub-modal-tab-pane { display: none; }
      .pe-pub-modal-tab-pane.active { display: block; }

      /* Secciones del detalle */
      .pe-pub-section { margin-bottom: 2rem; }
      .pe-pub-section h3 {
        font-family: 'Fraunces', serif;
        font-size: 1.3rem;
        margin: 0 0 .85rem;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: .65rem;
      }
      .pe-pub-section h3 i { color: #7c3aed; font-size: 1.1rem; }
      .pe-pub-section p { color: var(--text-muted); line-height: 1.7; margin: 0 0 .85rem; white-space: pre-wrap; }
      .pe-pub-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
      }
      .pe-pub-info-item {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 1rem;
      }
      .pe-pub-info-item-label {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-faint);
        margin-bottom: .35rem;
        font-weight: 700;
      }
      .pe-pub-info-item-value {
        font-size: 1rem;
        color: var(--text);
        font-weight: 600;
      }

      /* Materias por año (acordeón) */
      .pe-pub-anyo {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: .65rem;
        overflow: hidden;
      }
      .pe-pub-anyo-header {
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, #4c1d95, #7c3aed);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .pe-pub-anyo-header i { transition: transform .25s; }
      .pe-pub-anyo.open .pe-pub-anyo-header i { transform: rotate(180deg); }
      .pe-pub-anyo-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s;
      }
      .pe-pub-anyo.open .pe-pub-anyo-body { max-height: 500px; }
      .pe-pub-anyo-body-inner { padding: 1rem 1.25rem; }
      .pe-pub-materias-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .5rem;
      }
      .pe-pub-materia-chip {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: .55rem .85rem;
        font-size: .85rem;
        color: var(--text);
      }
      .pe-pub-materia-chip i { color: #7c3aed; margin-right: .4rem; font-size: .75rem; }

      /* Orientaciones */
      .pe-pub-orient {
        background: var(--surface);
        border: 1px solid var(--border);
        border-left: 4px solid #7c3aed;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin-bottom: .75rem;
      }
      .pe-pub-orient h4 {
        margin: 0 0 .35rem;
        color: #7c3aed;
        font-size: 1rem;
      }
      .pe-pub-orient p { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.55; }

      /* Galería */
      .pe-pub-galeria {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .85rem;
      }
      .pe-pub-galeria-item {
        aspect-ratio: 4/3;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        cursor: pointer;
        transition: transform .2s;
        background-color: #cbd5e1;
      }
      .pe-pub-galeria-item:hover { transform: scale(1.03); }

      /* Lightbox */
      .pe-pub-lightbox {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.92);
        z-index: 9500;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .pe-pub-lightbox.open { display: flex; }
      .pe-pub-lightbox img { max-width: 92%; max-height: 92vh; object-fit: contain; border-radius: 8px; }
      .pe-pub-lightbox-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.2);
        color: #fff;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1.2rem;
      }

      /* ═══ Chatbot flotante de planes (posición abajo derecha, igual que el global) ═══ */
      .pe-chatbot {
        position: fixed;
        bottom: calc(1.75rem + 76px);
        right: 1.75rem;
        width: min(420px, calc(100vw - 2rem));
        max-height: min(600px, calc(100vh - 180px));
        background: var(--bg);
        border-radius: 20px;
        box-shadow: 0 24px 80px rgba(76,29,149,.28), 0 4px 20px rgba(76,29,149,.14);
        z-index: 600;
        display: none;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border);
        animation: peChatIn .3s ease-out;
      }
      @keyframes peChatIn {
        from { opacity: 0; transform: translateY(20px) scale(.94); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      .pe-chatbot.open { display: flex; }
      .pe-chatbot.minimized {
        height: auto;
        max-height: none;
      }
      .pe-chatbot.minimized .pe-chatbot-body,
      .pe-chatbot.minimized .pe-chatbot-input { display: none; }
      .pe-chatbot-header {
        background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 60%, #7c3aed 100%);
        color: #fff;
        padding: .85rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        cursor: pointer;
        flex-shrink: 0;
      }
      .pe-chatbot-header-icon {
        width: 36px;
        height: 36px;
        background: rgba(255,255,255,.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .pe-chatbot-header-text { flex: 1; min-width: 0; }
      .pe-chatbot-header-title { font-weight: 700; font-size: .95rem; line-height: 1.2; }
      .pe-chatbot-header-status { font-size: .72rem; color: rgba(255,255,255,.85); }
      .pe-chatbot-header-status::before { content: '●'; color: #34d399; margin-right: .25rem; animation: peDot 2s infinite; }
      @keyframes peDot { 50% { opacity: .3; } }
      .pe-chatbot-header-close {
        background: rgba(255,255,255,.15);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
      }
      .pe-chatbot-body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        background: linear-gradient(180deg, #faf5ff, #fff);
        display: flex;
        flex-direction: column;
        gap: .75rem;
        min-height: 280px;
        max-height: 400px;
      }
      [data-theme="dark"] .pe-chatbot-body { background: linear-gradient(180deg, #1e1b4b, #0f172a); }
      .pe-chat-msg {
        padding: .65rem .9rem;
        border-radius: 14px;
        font-size: .88rem;
        line-height: 1.5;
        max-width: 85%;
        word-wrap: break-word;
      }
      .pe-chat-msg.user {
        background: linear-gradient(135deg, #4c1d95, #7c3aed);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
      }
      .pe-chat-msg.bot {
        background: var(--surface);
        color: var(--text);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
        border: 1px solid var(--border);
      }
      .pe-chat-msg.bot.thinking { opacity: .6; font-style: italic; }
      .pe-chat-suggestions {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        margin-top: .5rem;
      }
      .pe-chat-suggestion {
        background: var(--surface);
        border: 1px solid #c4b5fd;
        border-radius: 18px;
        padding: .45rem .85rem;
        font-size: .82rem;
        color: #4c1d95;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
      }
      .pe-chat-suggestion:hover { background: #f5f3ff; }
      [data-theme="dark"] .pe-chat-suggestion { background: rgba(124,58,237,.1); color: #ddd6fe; }
      .pe-chatbot-input {
        padding: .75rem;
        background: var(--surface);
        border-top: 1px solid var(--border);
        display: flex;
        gap: .5rem;
        flex-shrink: 0;
      }
      .pe-chatbot-input input {
        flex: 1;
        padding: .55rem .85rem;
        border: 1.5px solid var(--border);
        border-radius: 999px;
        font-size: .88rem;
        background: var(--bg);
        color: var(--text);
        font-family: inherit;
      }
      .pe-chatbot-input input:focus {
        outline: none;
        border-color: #7c3aed;
      }
      .pe-chatbot-input button {
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, #4c1d95, #7c3aed);
        border: none;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        flex-shrink: 0;
      }
      .pe-chatbot-input button:disabled { opacity: .5; cursor: not-allowed; }

      /* Botón flotante para abrir el chatbot (cuando está cerrado) - abajo derecha */
      .pe-chatbot-fab {
        position: fixed;
        bottom: 1.75rem;
        right: 1.75rem;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #4c1d95, #7c3aed);
        border: none;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        z-index: 600;
        box-shadow: 0 8px 24px rgba(124,58,237,.45), 0 2px 6px rgba(124,58,237,.25);
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        animation: pePulse 2.5s infinite;
        overflow: visible;
      }
      /* Media del avatar (img/video) — recorta al círculo sin afectar al padre */
      .pe-chatbot-fab img, .pe-chatbot-fab video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        clip-path: circle(50% at 50% 50%);
        object-fit: cover;
      }
      @keyframes pePulse {
        0%, 100% { box-shadow: 0 8px 24px rgba(124,58,237,.45), 0 2px 6px rgba(124,58,237,.25); }
        50% { box-shadow: 0 8px 32px rgba(124,58,237,.7), 0 0 0 8px rgba(124,58,237,.1); }
      }
      .pe-chatbot-fab.show { display: flex; }
      .pe-chatbot-fab:hover { transform: scale(1.08); }

      /* Badge "1" del chatbot de planes */
      .pe-chatbot-fab .pe-chat-notif {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: linear-gradient(135deg, #fbbf24, #fcd34d);
        color: #4c1d95;
        font-size: .7rem;
        font-weight: 900;
        display: none;
        align-items: center;
        justify-content: center;
        border: 2.5px solid var(--bg, #fff);
        z-index: 10;
        animation: peNotifPulse 2s infinite;
      }
      .pe-chatbot-fab .pe-chat-notif.show {
        display: flex;
      }
      @keyframes peNotifPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,191,36,.6); }
        50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(251,191,36,0); }
      }

      /* Cuando el chat está abierto, FAB muestra X y deja de pulsar */
      .pe-chatbot-fab.chat-open {
        animation: none;
        box-shadow: 0 8px 24px rgba(124,58,237,.45);
      }
      .pe-chatbot-fab.chat-open .pe-chat-notif { display: none !important; }

      @media (max-width: 768px) {
        .pe-chatbot { bottom: 1rem; right: 1rem; left: 1rem; width: auto; }
        .pe-chatbot-fab { bottom: 1rem; right: 1rem; }
        .pe-pub-modal { padding: 0; }
        .pe-pub-modal-content { border-radius: 0; margin: 0; min-height: 100vh; }
        .pe-pub-modal-hero { height: 200px; padding: 1.25rem; }
        .pe-pub-modal-body { padding: 1.25rem; }
      }