/* ============================================================
   CMS Claupost — Maquetado de secciones (texto 65% / imagen 35%)
   ============================================================ */

.claupost-article {
    --cp-sec-radius: 18px;
    --cp-sec-gap: 2rem;
    --cp-grad-1: #fdf2f8;   /* rosa muy suave */
    --cp-grad-2: #eef2ff;   /* lavanda muy suave */
    --cp-grad-hover-1: #fce7f3;
    --cp-grad-hover-2: #e0e7ff;
    --cp-accent: #6c63ff;
    display: flex;
    flex-direction: column;
    gap: var(--cp-sec-gap);
    margin: 1.5rem 0;
}

/* Intro (contenido antes del primer H2): ancho completo, sin marco */
.claupost-intro {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* ── Bloque de sección ───────────────────────────────────── */
.claupost-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.25rem;
    border-radius: var(--cp-sec-radius);
    background: linear-gradient(135deg, var(--cp-grad-1) 0%, var(--cp-grad-2) 100%);
    border: 1px solid rgba(108, 99, 255, 0.10);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    will-change: transform;
}

/* Hover: crece un poco y el degradado/sombra se intensifican */
.claupost-section:hover {
    transform: scale(1.012);
    background: linear-gradient(135deg, var(--cp-grad-hover-1) 0%, var(--cp-grad-hover-2) 100%);
    box-shadow: 0 16px 40px rgba(108, 99, 255, 0.18);
}

/* Orden imagen/texto según la variante */
.claupost-section--img-left  { flex-direction: row; }          /* imagen izquierda, texto derecha */
.claupost-section--img-right { flex-direction: row-reverse; }  /* texto izquierda, imagen derecha */

.claupost-section__text {
    flex: 0 0 65%;
    max-width: 65%;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.claupost-section__media {
    flex: 0 0 35%;
    max-width: 35%;
    margin: 0;
}

.claupost-section__media .claupost-section__img,
.claupost-section__media img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
    border-radius: 0;     /* imagen plana, sin bordes redondeados */
    box-shadow: none;     /* sin marco ni sombra */
}

/* Grid de productos / contenido a ancho completo, fuera de los marcos de sección */
.claupost-fullwidth-block {
    margin: 0;
}

/* Sección a ancho completo (sin imagen o con tabla) */
.claupost-section--full {
    display: block;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Tipografía interna */
.claupost-section h2 {
    margin-top: 0;
    color: var(--cp-accent);
    line-height: 1.25;
}
.claupost-section h3 {
    margin-top: 1.1rem;
    line-height: 1.3;
}
.claupost-section p,
.claupost-section li { line-height: 1.7; }
.claupost-section ul,
.claupost-section ol { padding-left: 1.25rem; }

/* Las tablas siempre a ancho completo y con scroll en móvil */
.claupost-section table,
.claupost-section--full table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.claupost-section th,
.claupost-section td {
    border: 1px solid rgba(108, 99, 255, 0.18);
    padding: 0.6rem 0.85rem;
    text-align: left;
}
.claupost-section th { background: rgba(108, 99, 255, 0.08); }

/* ── Responsive: apilar en móvil ─────────────────────────── */
@media ( max-width: 900px ) {
    .claupost-section {
        padding: 1.5rem;
        gap: 1.25rem;
    }
    .claupost-section--img-left,
    .claupost-section--img-right {
        flex-direction: column-reverse; /* imagen arriba, texto abajo */
    }
    .claupost-section__text,
    .claupost-section__media {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .claupost-section__media .claupost-section__img,
    .claupost-section__media img { max-height: 260px; }

    /* En móvil, el justificado con palabras largas deja huecos: lo suavizamos */
    .claupost-section__text,
    .claupost-section--full,
    .claupost-intro { text-align: left; }

    .claupost-section:hover { transform: none; } /* sin zoom en táctil */
}

/* Respeta quien prefiere menos movimiento */
@media ( prefers-reduced-motion: reduce ) {
    .claupost-section { transition: none; }
    .claupost-section:hover { transform: none; }
}