/* ============================================
   SINGLE POST - ESTILO LUCKY PREMIUM
   Layout Desktop: Split-screen (Logo+Título | Imagen)
   Layout Móvil: Vertical (Logo → Línea → Título → Fecha → Imagen)
   ============================================ */

/**
 * CONTENEDOR PRINCIPAL SINGLE POST
 * - Background: Negro de AuraPRO (#050506)
 * - Color de texto: #f5f5f5
 */
.ap-header {
    display: none;
}


.ap-single-post {
    background: var(--ap-color-bg, #050506);
    color: var(--ap-color-text, #f5f5f5);
}

/**
 * HERO SPLIT-SCREEN (Logo+Título | Imagen)
 * - display: flex con 2 columnas (50% cada una)
 * - min-height: 100vh para ocupar toda la pantalla
 * - position: relative para el botón regresar
 */
.ap-post-hero-split {
    display: flex;
    min-height: 70vh;
    position: relative;
    padding: 0em 10rem;
    margin-top: -3rem;
}

/**
 * BOTÓN REGRESAR (posición absoluta, esquina superior izquierda)
 * - z-index: 20 para estar encima de todo
 * - Estilo minimalista con borde
 */
.ap-btn-back {
    position: absolute;
    top: 1rem;
    left: 12rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--ap-radius-md, 10px);
    color: var(--ap-color-text, #f5f5f5);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--ap-font-body, 'Poppins', sans-serif);
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    z-index: 20;
    margin-top: 10px;
}

.ap-btn-back:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--ap-color-gold, #d4af37);
    color: var(--ap-color-gold, #d4af37);
    transform: translateX(-4px);
}

/**
 * LADO IZQUIERDO: Logo + Título + Fecha
 * - width: 50% en desktop
 * - padding: 4rem 20% (20% lateral según solicitud)
 * - RAZÓN: Centrar más el contenido y dar espacio a los lados
 */
.ap-hero-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 4%;
    background: var(--ap-color-bg, #050506);
}


/**
 * LOGO AURAPRO
 * - text-align: left (alineado a la izquierda según referencia)
 * - margin-bottom: 2rem
 */
.ap-post-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.ap-logo-img {
    max-width: 400px;
    height: auto;
    margin-top: 1.5rem;
}

.ap-logo-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--ap-color-muted, #b0b0b0);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: var(--ap-font-body, 'Poppins', sans-serif);
}

/**
 * LÍNEA DIVISORIA DORADA
 * - width: 100% (full-width dentro del contenedor)
 * - height: 2px
 * - background: Gradiente dorado de AuraPRO
 * - margin-block: Espaciado antes y después
 */
.ap-divider-gold {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--ap-color-gold, #d4af37) 0%, 
        var(--ap-color-gold-soft, #f4e5a1) 50%, 
        var(--ap-color-gold, #d4af37) 100%
    );
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/**
 * TÍTULO DEL POST (lado izquierdo)
 * - font-family: Calder Dark (variable de AuraPRO)
 * - font-size: Grande con clamp() para responsive
 * - text-transform: uppercase según referencia
 * - text-align: left (alineado a la izquierda)
 */
.ap-post-title-split {
    font-family: var(--ap-font-title, 'Calder Dark', serif);
    font-size: clamp(1.8rem, 4vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ap-color-text, #f5f5f5);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-align: left;
}

/**
 * FECHA DE PUBLICACIÓN (lado izquierdo)
 * - display: flex con justify-content: flex-start (alineado a la izquierda)
 * - color: Muted para jerarquía visual
 * - Ícono dorado para acento
 */
.ap-post-meta-date {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    color: var(--ap-color-muted, #b0b0b0);
    font-size: 0.9rem;
    font-weight: 400;
    font-family: var(--ap-font-body, 'Poppins', sans-serif);
}

.ap-post-meta-date i {
    color: var(--ap-color-gold, #d4af37);
    font-size: 1rem;
}

/**
 * LADO DERECHO: Imagen Destacada
 * - width: 50% en desktop
 * - padding: 4rem 20% para centrar imagen
 * - RAZÓN: Simetría con el lado izquierdo
 */
.ap-hero-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 12%;
    background: var(--ap-color-bg, #050506);
}


/**
 * IMAGEN DESTACADA (lado derecho)
 * - width: 100% del contenedor
 * - height: auto para mantener proporción
 * - object-fit: cover
 * - border-radius: Esquinas redondeadas premium
 * - RAZÓN: Imagen más compacta y centrada
 */
.ap-post-featured-img-split {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
    display: block;
    border-radius: var(--ap-radius-lg, 18px);
    box-shadow: var(--ap-shadow-soft, 0 18px 45px rgba(0,0,0,0.55));
}


/**
 * PLACEHOLDER SI NO HAY IMAGEN
 * - Fondo gris oscuro con ícono centrado
 */
.ap-post-placeholder-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-post-placeholder-img i {
    font-size: 5rem;
    color: rgba(212, 175, 55, 0.3);
}

/**
 * SECCIÓN DE CONTENIDO (2 columnas: Contenido + Sidebar)
 */
.ap-post-content-section {
    padding: 2em 9rem;
    text-align: justify;
}

/**
 * LAYOUT DE 2 COLUMNAS
 */
.ap-post-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/**
 * CONTENIDO DEL ARTÍCULO (columna izquierda)
 */
.ap-post-content {
    background: #ffffff;
    color: #000000;
    padding: 3rem;
    line-height: 1.8;
    font-size: 1.05rem;
    font-family: var(--ap-font-body, 'Acumin Pro', 'Poppins', sans-serif);
}


/**
 * PÁRRAFOS DEL CONTENIDO
 * - margin-bottom: Espaciado entre párrafos
 * - color: #000000 (negro para fondo blanco)
 */
.ap-post-content p {
    margin-bottom: 1.5rem;
    color: #000000;
}


/**
 * ENCABEZADOS H2 y H3 DEL CONTENIDO
 * - color: Dorado de AuraPRO para resaltar
 * - font-family: Raleway (headings de AuraPRO)
 * - margin-top: Espaciado superior
 */
.ap-post-content h2 {
    color: #000000;
    font-family: var(--ap-font-title, 'Calder Dark', serif);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 700;
}

.ap-post-content h3 {
    color: #000000;
    font-family: var(--ap-font-heading, 'Raleway', sans-serif);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
}

/**
 * LISTAS (UL y OL) DEL CONTENIDO
 * - margin-bottom: Espaciado después de la lista
 * - padding-left: Indentación
 */
.ap-post-content ul,
.ap-post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.ap-post-content li {
    margin-bottom: 0.8rem;
    color: #000000;
}

/**
 * TEXTO EN NEGRITA
 * - color: Dorado secundario para resaltar
 * - font-weight: 600
 */
.ap-post-content strong {
    color: #000000;
    font-weight: 700;
}

/**
 * IMÁGENES DENTRO DEL CONTENIDO
 * - max-width: 100% para responsive
 * - border-radius: Esquinas redondeadas
 * - margin-block: Espaciado vertical
 */
.ap-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ap-radius-md, 10px);
    margin-block: 1.5rem;
}

/**
 * ENLACES DENTRO DEL CONTENIDO
 * - color: Dorado AuraPRO para indicar interactividad
 * - text-decoration: underline
 * - RAZÓN: Mantener color de marca en enlaces
 */
.ap-post-content a {
    color: var(--ap-color-gold, #d4af37);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.ap-post-content a:hover {
    color: #000000;
}


/**
 * SECCIÓN DE COMPARTIR EN REDES SOCIALES
 * - padding-top: Espaciado superior
 * - border-top: Separador visual
 * - margin-top: Separación del contenido
 */
.ap-post-share {
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
    margin-top: 3rem;
}

.ap-share-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #000000;
    font-family: var(--ap-font-heading, 'Raleway', sans-serif);
    margin-bottom: 1rem;
}

/**
 * BOTONES DE COMPARTIR
 * - display: flex con gap para espaciado uniforme
 * - Cada botón es un círculo con ícono centrado
 */
.ap-share-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}


/* Colores específicos por red social */
.ap-share-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

.ap-share-twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
    box-shadow: 0 6px 20px rgba(29, 161, 242, 0.4);
}

.ap-share-whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.ap-share-linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
}

.ap-share-copy:hover {
    background: var(--ap-color-gold, #d4af37);
    border-color: var(--ap-color-gold, #d4af37);
    color: #000000;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/**
 * SIDEBAR (columna derecha)
 * - Contiene widgets de artículos relacionados
 */
.ap-post-sidebar {
    /* El sidebar se mantiene en su columna del grid */
}

/**
 * WIDGET DEL SIDEBAR
 * - background: Semi-transparente
 * - padding: Espaciado interno
 * - border-radius: Esquinas redondeadas
 * - border: Borde sutil
 */
.ap-sidebar-widget {
    background: #ffffff;
    padding: 2rem;
    margin-bottom: 2rem;
}

.ap-widget-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    font-family: var(--ap-font-title, 'Calder Dark', serif);
    margin-bottom: 1.5rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/**
 * LISTA DE POSTS RECIENTES (Artículos Relacionados)
 * - list-style: none para quitar bullets
 * - padding: 0
 * - margin: 0
 */
.ap-recent-posts {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--ast-code-block-background);
    border-radius: 15px;
}

.ap-recent-posts li {
    margin-bottom: 1.5rem;
}

/**
 * LINK DE ARTÍCULO RELACIONADO
 * - display: flex para imagen + texto horizontal
 * - gap: Espaciado entre imagen y texto
 * - transition: Hover suave
 */
.ap-related-link {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.8rem;
}

.ap-related-link:hover {
    opacity: 0.7;
    transform: translateX(4px);
}

/**
 * THUMBNAIL DE ARTÍCULO RELACIONADO
 * - flex-shrink: 0 para mantener tamaño fijo
 * - width: 80px
 * - height: 80px
 * - border-radius: Esquinas redondeadas
 */
.ap-recent-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--ap-radius-md, 10px);
    overflow: hidden;
}

.ap-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * INFORMACIÓN DEL ARTÍCULO RELACIONADO
 * - display: flex columna para apilar título y botón "LEER"
 */
.ap-recent-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.ap-recent-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000;
    font-family: var(--ap-font-body, 'Acumin Pro', 'Poppins', sans-serif);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.ap-read-more {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ap-color-gold, #d4af37);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--ap-font-body, 'Poppins', sans-serif);
}

/* ============================================
   RESPONSIVE - TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /**
     * Reducir padding en tablet
     */
    /**
     * Reducir padding en tablet
     * - Mantener proporción de padding lateral
     */
    .ap-hero-left {
        padding: 3rem 15%;
    }

    .ap-hero-right {
        padding: 3rem 15%;
    }

    /**
     * Logo más pequeño en tablet
     */
    .ap-logo-img {
        max-width: 300px;
    }

    .ap-post-layout {
        grid-template-columns: 1fr 300px;
        gap: 2rem;
    }

    .ap-post-content {
        padding: 2.5rem;
    }

    .ap-post-title-split {
        font-size: 2rem;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /**
     * CAMBIAR A LAYOUT VERTICAL EN MÓVIL
     * - flex-direction: column
     * - RAZÓN: Logo → Línea → Título → Fecha → Imagen según referencia
     */
    .ap-post-hero-split {
        flex-direction: column;
        min-height: auto;
        padding: 1rem 0rem;
    }

    /**
     * LADO IZQUIERDO: width 100% en móvil
     * - text-align: center para centrar contenido
     * - padding reducido
     */
    .ap-hero-left {
        width: 100%;
        padding: 5rem 1.5rem;
        text-align: center;
    }

    /**
     * Logo centrado en móvil
     */
    .ap-post-logo {
        align-items: center;
        /* margin: 0 auto 1.5rem; */
    }

    .ap-logo-img {
        max-width: 400px;
    }

    /**
     * Línea divisoria dorada: más corta en móvil
     */
    .ap-divider-gold {
        margin-block: 1.5rem;
    }

    /**
     * Título centrado en móvil
     */
    .ap-post-title-split {
        font-size: 1.5rem;
        text-align: center;
    }

    /**
     * Fecha centrada en móvil
     */
    .ap-post-meta-date {
        justify-content: center;
    }

    /**
     * LADO DERECHO: width 100% en móvil
     * - height: auto (no fixed height)
     */
    .ap-hero-right {
        width: 100%;
        height: auto;
        align-self: center;
    }

    .ap-post-featured-img-split {
        height: auto;
        max-height: 60vh;
        object-fit: cover;
    }

    /**
     * Botón regresar: posición ajustada en móvil
     */
    .ap-btn-back {
        top: 1rem;
        left: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /**
     * LAYOUT DE CONTENIDO: 1 columna en móvil
     */
    .ap-post-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /**
     * Contenido: Reducir padding en móvil
     */
    .ap-post-content {
        padding: 2rem 1.5rem;
        font-size: 1rem;
    }

    /**
     * Sidebar: Reducir padding en móvil
     */
    .ap-sidebar-widget {
        padding: 1.5rem;
    }


    /**
     * Thumbnails de artículos relacionados: Más pequeños en móvil
     */
    .ap-recent-thumb {
        width: 70px;
        height: 70px;
    }

    .ap-recent-info h4 {
        font-size: 0.9rem;
    }
    .ap-post-content-section {
    padding: 0em 1rem;
    }
    .ap-btn-back {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        margin-top: 3rem;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL PEQUEÑO (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .ap-hero-left {
        padding: 3rem 1rem;
    }

    .ap-post-content {
        padding: 1.5rem 1rem;
    }

    .ap-post-title-split {
        font-size: 1.3rem;
    }

    .ap-btn-back {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }

    .ap-sidebar-widget {
        padding: 1.2rem;
    }
}