/* ─── 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;
}
/* Imagen de fondo con Tamaño "Cubrir": capa aparte, estirada borde a
   borde del body (mismo truco que .maq-section-fullwidth, adaptado a un
   hijo en posición absoluta). Ver render_cover_bg_layer() en el renderer. */
.maq-section-bg-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    z-index: 0;
    pointer-events: none;
}

/* ── 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;
}

/* Igualar altura de columnas: .maq-row ya es flex, así que por defecto
   (align-items:normal → stretch) el CONTENEDOR .maq-col de cada columna ya
   iguala su alto al de la más alta. Lo que NO se iguala solo es el
   contenido visible dentro (textos con caja, botones, imágenes, etc.), que
   ocupa su alto natural y deja espacio vacío debajo. Por eso, con esta
   clase, la columna pasa a ser flex en columna y cada elemento hijo directo
   se estira (flex:1) para repartirse ese alto, de forma que cajas con
   fondo/borde en distintas columnas terminen a la misma altura visual. */
.maq-row-equal-height { align-items: stretch; }
.maq-row-equal-height > .maq-col {
    display: flex;
    flex-direction: column;
}
.maq-row-equal-height > .maq-col > * {
    flex: 1 1 auto;
}

.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; }

/* Forma */
.maq-btn-shape-square  { border-radius: 0; }
.maq-btn-shape-rounded { border-radius: 4px; }
.maq-btn-shape-pill    { border-radius: 999px; }

/* Color personalizado (fondo/borde/texto vienen como variables CSS --maq-btn-*
   inline en el elemento). Especificidad de dos clases: gana por encima de
   los .maq-btn-style-*(:hover) que solo tienen una. Fallbacks: transparent
   para fondo replica el comportamiento de contorno/fantasma cuando no se
   define fondo propio; currentColor/inherit son neutros si faltara alguna
   variable. */
.maq-button.maq-btn-custom-color {
    background-color: var(--maq-btn-bg, transparent);
    border-color: var(--maq-btn-border, currentColor);
    color: var(--maq-btn-color, inherit);
}
.maq-button.maq-btn-custom-color:hover {
    background-color: var(--maq-btn-bg, transparent);
    border-color: var(--maq-btn-border, currentColor);
    color: var(--maq-btn-color, inherit);
    filter: brightness(.88);
}

/* 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%;
}

/* ── Animaciones de entrada (elemento Imagen, "Editar: Imagen") ────────────
   Mecanismo: el wrapper recibe `maq-anim maq-anim-{variante}`. `.maq-anim`
   arranca oculto y con la animación en pausa; `assets/js/frontend.js` observa
   el elemento con IntersectionObserver y, al entrar en viewport, agrega
   `maq-anim-play`, lo que dispara la animación vía `animation-play-state`.
   Los nombres de keyframe llevan el prefijo `maq` para no chocar con ninguna
   librería externa (ej. animate.css) que pudiera estar cargada por el tema. */
.maq-anim {
    opacity: 0;
    animation-duration: .9s;
    animation-fill-mode: both;
    animation-play-state: paused;
}
.maq-anim.maq-anim-play {
    animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
    .maq-anim {
        opacity: 1;
        animation: none !important;
    }
}

/* Entradas rebotantes */
.maq-anim-bounceIn      { animation-name: maqBounceIn; }
.maq-anim-bounceInDown  { animation-name: maqBounceInDown; }
.maq-anim-bounceInLeft  { animation-name: maqBounceInLeft; }
.maq-anim-bounceInRight { animation-name: maqBounceInRight; }
.maq-anim-bounceInUp    { animation-name: maqBounceInUp; }

/* Entradas con fundido */
.maq-anim-fadeIn         { animation-name: maqFadeIn; }
.maq-anim-fadeInDown     { animation-name: maqFadeInDown; }
.maq-anim-fadeInDownBig  { animation-name: maqFadeInDownBig; }
.maq-anim-fadeInLeft     { animation-name: maqFadeInLeft; }
.maq-anim-fadeInLeftBig  { animation-name: maqFadeInLeftBig; }
.maq-anim-fadeInRight    { animation-name: maqFadeInRight; }
.maq-anim-fadeInRightBig { animation-name: maqFadeInRightBig; }
.maq-anim-fadeInUp       { animation-name: maqFadeInUp; }

/* Flippers */
.maq-anim-flipInX { animation-name: maqFlipInX; }
.maq-anim-flipInY { animation-name: maqFlipInY; }

/* Lightspeed */
.maq-anim-lightSpeedIn { animation-name: maqLightSpeedIn; animation-timing-function: ease-out; }

/* Entradas girando */
.maq-anim-rotateIn           { animation-name: maqRotateIn; }
.maq-anim-rotateInDownLeft   { animation-name: maqRotateInDownLeft; }
.maq-anim-rotateInDownRight  { animation-name: maqRotateInDownRight; }
.maq-anim-rotateInUpLeft     { animation-name: maqRotateInUpLeft; }
.maq-anim-rotateInUpRight    { animation-name: maqRotateInUpRight; }

/* Promociones */
.maq-anim-rollIn { animation-name: maqRollIn; }

/* Entradas con Zoom */
.maq-anim-zoomIn     { animation-name: maqZoomIn; }
.maq-anim-zoomInDown { animation-name: maqZoomInDown; }
.maq-anim-zoomInLeft { animation-name: maqZoomInLeft; }
.maq-anim-zoomInRight{ animation-name: maqZoomInRight; }
.maq-anim-zoomInUp   { animation-name: maqZoomInUp; }

/* Entradas de diapositivas */
.maq-anim-slideInDown  { animation-name: maqSlideInDown; }
.maq-anim-slideInLeft  { animation-name: maqSlideInLeft; }
.maq-anim-slideInRight { animation-name: maqSlideInRight; }
.maq-anim-slideInUp    { animation-name: maqSlideInUp; }

/* Predeterminado */
.maq-anim-defaultTopBottom { animation-name: maqDefaultTopBottom; }
.maq-anim-defaultBottomTop { animation-name: maqDefaultBottomTop; }
.maq-anim-defaultLeftRight { animation-name: maqDefaultLeftRight; }
.maq-anim-defaultRightLeft { animation-name: maqDefaultRightLeft; }
.maq-anim-defaultCenter    { animation-name: maqDefaultCenter; }

@keyframes maqBounceIn {
    0%, 20%, 40%, 60%, 80%, 100% { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    0%   { opacity: 0; transform: scale3d(.3,.3,.3); }
    20%  { transform: scale3d(1.1,1.1,1.1); }
    40%  { transform: scale3d(.9,.9,.9); }
    60%  { opacity: 1; transform: scale3d(1.03,1.03,1.03); }
    80%  { transform: scale3d(.97,.97,.97); }
    100% { opacity: 1; transform: scale3d(1,1,1); }
}
@keyframes maqBounceInDown {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    0%   { opacity: 0; transform: translate3d(0,-3000px,0); }
    60%  { opacity: 1; transform: translate3d(0,25px,0); }
    75%  { transform: translate3d(0,-10px,0); }
    90%  { transform: translate3d(0,5px,0); }
    100% { transform: translate3d(0,0,0); }
}
@keyframes maqBounceInLeft {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    0%   { opacity: 0; transform: translate3d(-3000px,0,0); }
    60%  { opacity: 1; transform: translate3d(25px,0,0); }
    75%  { transform: translate3d(-10px,0,0); }
    90%  { transform: translate3d(5px,0,0); }
    100% { transform: translate3d(0,0,0); }
}
@keyframes maqBounceInRight {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    0%   { opacity: 0; transform: translate3d(3000px,0,0); }
    60%  { opacity: 1; transform: translate3d(-25px,0,0); }
    75%  { transform: translate3d(10px,0,0); }
    90%  { transform: translate3d(-5px,0,0); }
    100% { transform: translate3d(0,0,0); }
}
@keyframes maqBounceInUp {
    0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
    0%   { opacity: 0; transform: translate3d(0,3000px,0); }
    60%  { opacity: 1; transform: translate3d(0,-20px,0); }
    75%  { transform: translate3d(0,10px,0); }
    90%  { transform: translate3d(0,-5px,0); }
    100% { transform: translate3d(0,0,0); }
}

@keyframes maqFadeIn         { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes maqFadeInDown     { 0% { opacity: 0; transform: translate3d(0,-40px,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqFadeInDownBig  { 0% { opacity: 0; transform: translate3d(0,-200px,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqFadeInLeft     { 0% { opacity: 0; transform: translate3d(-40px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqFadeInLeftBig  { 0% { opacity: 0; transform: translate3d(-200px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqFadeInRight    { 0% { opacity: 0; transform: translate3d(40px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqFadeInRightBig { 0% { opacity: 0; transform: translate3d(200px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqFadeInUp       { 0% { opacity: 0; transform: translate3d(0,40px,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }

@keyframes maqFlipInX {
    0%   { transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0; }
    40%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
    60%  { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
    80%  { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
    100% { transform: perspective(400px); opacity: 1; }
}
@keyframes maqFlipInY {
    0%   { transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0; }
    40%  { transform: perspective(400px) rotate3d(0,1,0,-20deg); animation-timing-function: ease-in; }
    60%  { transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; }
    80%  { transform: perspective(400px) rotate3d(0,1,0,-5deg); }
    100% { transform: perspective(400px); opacity: 1; }
}

@keyframes maqLightSpeedIn {
    0%   { transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0; }
    60%  { transform: skewX(20deg); opacity: 1; }
    80%  { transform: skewX(-5deg); opacity: 1; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes maqRotateIn {
    0%   { transform-origin: center; transform: rotate3d(0,0,1,-200deg); opacity: 0; }
    100% { transform-origin: center; transform: translate3d(0,0,0); opacity: 1; }
}
@keyframes maqRotateInDownLeft {
    0%   { transform-origin: left bottom; transform: rotate3d(0,0,1,-45deg); opacity: 0; }
    100% { transform-origin: left bottom; transform: translate3d(0,0,0); opacity: 1; }
}
@keyframes maqRotateInDownRight {
    0%   { transform-origin: right bottom; transform: rotate3d(0,0,1,45deg); opacity: 0; }
    100% { transform-origin: right bottom; transform: translate3d(0,0,0); opacity: 1; }
}
@keyframes maqRotateInUpLeft {
    0%   { transform-origin: left bottom; transform: rotate3d(0,0,1,45deg); opacity: 0; }
    100% { transform-origin: left bottom; transform: translate3d(0,0,0); opacity: 1; }
}
@keyframes maqRotateInUpRight {
    0%   { transform-origin: right bottom; transform: rotate3d(0,0,1,-90deg); opacity: 0; }
    100% { transform-origin: right bottom; transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes maqRollIn {
    0%   { opacity: 0; transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); }
    100% { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes maqZoomIn {
    0%   { opacity: 0; transform: scale3d(.3,.3,.3); }
    50%  { opacity: 1; }
    100% { opacity: 1; transform: scale3d(1,1,1); }
}
@keyframes maqZoomInDown {
    0%   { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
    60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
    100% { opacity: 1; transform: scale3d(1,1,1) translate3d(0,0,0); }
}
@keyframes maqZoomInLeft {
    0%   { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
    60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
    100% { opacity: 1; transform: scale3d(1,1,1) translate3d(0,0,0); }
}
@keyframes maqZoomInRight {
    0%   { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
    60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
    100% { opacity: 1; transform: scale3d(1,1,1) translate3d(0,0,0); }
}
@keyframes maqZoomInUp {
    0%   { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
    60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
    100% { opacity: 1; transform: scale3d(1,1,1) translate3d(0,0,0); }
}

@keyframes maqSlideInDown  { 0% { opacity: 0; transform: translate3d(0,-100%,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqSlideInLeft  { 0% { opacity: 0; transform: translate3d(-100%,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqSlideInRight { 0% { opacity: 0; transform: translate3d(100%,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqSlideInUp    { 0% { opacity: 0; transform: translate3d(0,100%,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }

@keyframes maqDefaultTopBottom { 0% { opacity: 0; transform: translate3d(0,-40px,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqDefaultBottomTop { 0% { opacity: 0; transform: translate3d(0,40px,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqDefaultLeftRight { 0% { opacity: 0; transform: translate3d(-40px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqDefaultRightLeft { 0% { opacity: 0; transform: translate3d(40px,0,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes maqDefaultCenter    { 0% { opacity: 0; transform: scale3d(.85,.85,.85); } 100% { opacity: 1; transform: scale3d(1,1,1); } }

/* ── Acordeón (spoilers) ──────────────────────────────────────────────────
   El signo "+"/"−" es puro CSS (::before según aria-expanded del botón).
   El colapsado usa el truco grid-template-rows 0fr↔1fr (sin medir alturas
   por JS): .maq-acc-body-inner recorta con overflow:hidden mientras la fila
   de grid crece/decrece. */
.maq-accordion { display: flex; flex-direction: column; gap: 8px; }
.maq-acc-item {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.maq-acc-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: inherit;
}
.maq-acc-header:hover { background: #eef2f7; }
.maq-acc-title { flex: 1; }
.maq-acc-icon {
    font-size: 1.3em;
    line-height: 1;
    width: 1em;
    text-align: center;
    flex-shrink: 0;
}
.maq-acc-icon::before { content: "+"; }
.maq-acc-header[aria-expanded="true"] .maq-acc-icon::before { content: "−"; }
.maq-acc-body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.maq-acc-item-open .maq-acc-body-wrap { grid-template-rows: 1fr; }
.maq-acc-body-inner { overflow: hidden; }
.maq-acc-body { padding: 16px 18px; }
.maq-acc-body p:first-child { margin-top: 0; }
.maq-acc-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .maq-acc-body-wrap { transition: none; }
}

/* ── Carrusel de imágenes ─────────────────────────────────────────────────
   Técnica sin librerías: cada slide tiene flex-basis fijo en % (relativo al
   propio track, que no se achica gracias a flex-shrink:0 en los slides), y
   el desplazamiento es un transform:translateX en % sobre el track — así
   el cálculo del JS (índice × 100/slidesVisible) queda siempre exacto, sin
   depender del ancho real en píxeles del viewport. */
.maq-carousel { position: relative; }
.maq-carousel-viewport { overflow: hidden; width: 100%; }
.maq-carousel-track {
    display: flex;
    will-change: transform;
}
.maq-carousel-slide {
    flex: 0 0 calc(100% / var(--maq-carousel-slides-visible, 1));
    flex-shrink: 0;
    box-sizing: border-box;
    padding-right: var(--maq-carousel-gap, 12px);
}
.maq-carousel-img {
    display: block;
    width: 100%;
    height: var(--maq-carousel-height, 360px);
    border-radius: 4px;
}
.maq-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .2s ease;
}
.maq-carousel-arrow:hover  { background: rgba(0,0,0,.7); }
.maq-carousel-arrow:disabled { opacity: .3; cursor: default; }
.maq-carousel-prev { left: 10px; }
.maq-carousel-next { right: 10px; }
.maq-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.maq-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #c8d2da;
    cursor: pointer;
    padding: 0;
}
.maq-carousel-dot-active { background: #5b7fa6; }
@media (prefers-reduced-motion: reduce) {
    .maq-carousel-track { transition: none !important; }
}

/* ── 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; }
}