/* ─── Maquetador – Frontend Styles ─────────────────────────────────────────── */

/* ── Contenedor principal ────────────────────────────────────────────────── */
.maq-content { width: 100%; }

/* ── Sección ─────────────────────────────────────────────────────────────── */
.maq-section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.maq-section-fullwidth { width: 100vw; margin-left: calc(50% - 50vw); }
.maq-section-full-height { min-height: 100vh; display: flex; align-items: center; }
.maq-section-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Fila y columnas ─────────────────────────────────────────────────────── */
.maq-row-inner,
.maq-row-inner-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
}
.maq-row-inner-content { max-width: 100%; padding: 0; }

.maq-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.maq-col {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 1px;
    /* Sin esto, un hijo con ancho fijo (p. ej. HTML pegado de otra
       página, con un div a 1200px) fuerza a la columna flex a crecer
       más allá de su % y descuadra toda la fila — la causa más común
       del "espacio en blanco a la derecha, contenido corrido a la
       izquierda" al pegar HTML externo. */
    min-width: 0;
}

.maq-col-1-1  { width: 100%; }
.maq-col-1-2  { width: 50%; }
.maq-col-1-3  { width: 33.3333%; }
.maq-col-2-3  { width: 66.6666%; }
.maq-col-1-4  { width: 25%; }
.maq-col-3-4  { width: 75%; }
.maq-col-1-6  { width: 16.6666%; }
.maq-col-5-6  { width: 83.3333%; }

/* ── Fila interior ───────────────────────────────────────────────────────── */
.maq-inner-row { width: 100%; margin-bottom: 20px; }
.maq-inner-row .maq-row { margin-left: -10px; margin-right: -10px; }
.maq-inner-row .maq-col { padding-left: 10px; padding-right: 10px; }

/* ── Alineaciones genéricas ──────────────────────────────────────────────── */
.maq-align-left   { text-align: left; }
.maq-align-center { text-align: center; }
.maq-align-right  { text-align: right; }

/* ── Text Block ──────────────────────────────────────────────────────────── */
.maq-text-block { margin-bottom: 20px; }
.maq-text-block > *:last-child { margin-bottom: 0; }

/* ── Single Image ────────────────────────────────────────────────────────── */
.maq-single-image { margin-bottom: 20px; }
.maq-single-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* ── Empty Space ─────────────────────────────────────────────────────────── */
.maq-empty-space { clear: both; }

/* ── Counter ─────────────────────────────────────────────────────────────── */
.maq-counter { margin-bottom: 24px; }
.maq-counter-number { line-height: 1; }
.maq-counter-value {
    font-size: 3.5em;
    font-weight: 700;
    display: inline-block;
    line-height: 1.1;
}
.maq-counter-prefix {
    font-size: 1.6em;
    font-weight: 600;
    vertical-align: text-bottom;
    margin-right: 3px;
}
.maq-counter-units {
    font-size: 1.6em;
    font-weight: 600;
    vertical-align: text-bottom;
    margin-left: 3px;
}
.maq-counter-title { margin-top: 8px; margin-bottom: 0; }

/* ── Separator ───────────────────────────────────────────────────────────── */
.maq-separator { margin: 24px 0; }

.maq-sep-line-only {
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cccccc;
}

.maq-sep-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.maq-sep-line {
    display: block;
    flex: 1;
    height: 0;
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
}
.maq-sep-title {
    white-space: nowrap;
    font-size: .9em;
    color: inherit;
}

/* Alineación: ocultar líneas según posición */
.maq-sep-align-left  .maq-sep-line-before { display: none; }
.maq-sep-align-right .maq-sep-line-after  { display: none; }

/* ── Button ──────────────────────────────────────────────────────────────── */
.maq-button-wrap { margin-bottom: 20px; }

.maq-button {
    display: inline-block;
    padding: .6em 1.4em;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* Tamaños */
.maq-btn-size-small  { font-size: .82em; padding: .4em 1em; }
.maq-btn-size-medium { font-size: 1em;   padding: .6em 1.4em; }
.maq-btn-size-large  { font-size: 1.15em; padding: .75em 2em; }

/* Estilos */
.maq-btn-style-primary {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.maq-btn-style-primary:hover {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}
.maq-btn-style-secondary {
    background: #3c434a;
    color: #fff;
    border-color: #3c434a;
}
.maq-btn-style-secondary:hover {
    background: #1d2327;
    border-color: #1d2327;
    color: #fff;
}
.maq-btn-style-outline {
    background: transparent;
    color: #2271b1;
    border-color: #2271b1;
}
.maq-btn-style-outline:hover {
    background: #2271b1;
    color: #fff;
}
.maq-btn-style-ghost {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}
.maq-btn-style-ghost:hover {
    background: rgba(0,0,0,.06);
}
.maq-btn-style-default {
    background: #f6f7f7;
    color: #3c434a;
    border-color: #c3c4c7;
}
.maq-btn-style-default:hover {
    background: #e2e4e7;
    border-color: #a7aaad;
}

.maq-btn-icon { margin-right: 5px; }

/* ── Post Grid ───────────────────────────────────────────────────────────── */
.maq-post-grid {
    display: grid;
    gap: 28px;
    margin-bottom: 28px;
}
.maq-pg-cols-1 { grid-template-columns: 1fr; }
.maq-pg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.maq-pg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.maq-pg-cols-4 { grid-template-columns: repeat(4, 1fr); }

.maq-pg-item {
    display: flex;
    flex-direction: column;
}

.maq-pg-thumb { margin-bottom: 12px; overflow: hidden; border-radius: 4px; }
.maq-pg-thumb img { width: 100%; height: auto; display: block; transition: transform .3s; }
.maq-pg-thumb:hover img { transform: scale(1.03); }

.maq-pg-body { display: flex; flex-direction: column; flex: 1; gap: 6px; }

.maq-pg-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.maq-pg-date, .maq-pg-author { font-size: .8em; color: #787c82; }
.maq-pg-date::before { content: '📅 '; }
.maq-pg-author::before { content: '✍ '; }

.maq-pg-title { margin: 0; font-size: 1.05em; line-height: 1.4; }
.maq-pg-title a { text-decoration: none; color: inherit; }
.maq-pg-title a:hover { color: #2271b1; }

.maq-pg-excerpt { font-size: .9em; color: #50575e; line-height: 1.6; flex: 1; }

.maq-pg-more {
    display: inline-block;
    margin-top: 8px;
    font-size: .85em;
    font-weight: 600;
    color: #2271b1;
    text-decoration: none;
}
.maq-pg-more:hover { color: #135e96; text-decoration: underline; }

.maq-post-grid-empty { color: #787c82; font-style: italic; padding: 20px 0; }

/* ── Código HTML personalizado ───────────────────────────────────────────── */
/* Contención defensiva: el contenido de este elemento no pasa por ningún
   filtro (ver class-element-raw-html.php), así que puede traer anchos
   fijos, tablas o imágenes pensadas para una página completa. Si eso no
   se contiene, empuja la columna y el resto de la fila fuera de la
   pantalla en vez de recortarse u ofrecer scroll dentro del bloque. */
.maq-raw-html {
    max-width: 100%;
    overflow-x: auto;
}
.maq-raw-html img,
.maq-raw-html video,
.maq-raw-html iframe,
.maq-raw-html table {
    max-width: 100%;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .maq-pg-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .maq-col-1-4, .maq-col-3-4 { width: 50%; }
}

@media (max-width: 768px) {
    .maq-col { width: 100% !important; }
    .maq-pg-cols-2,
    .maq-pg-cols-3,
    .maq-pg-cols-4 { grid-template-columns: 1fr; }
    .maq-row-inner,
    .maq-row-inner-content { padding: 0 15px; }
    .maq-section-fullwidth { width: 100%; margin-left: 0; }
    .maq-counter-value { font-size: 2.5em; }
}