/**
 * Karnak frontend — CORE.
 *
 * Reglas estructurales que necesita CUALQUIER página con contenido de Karnak
 * (body, header o footer de Theme Builder), sin importar qué widgets use:
 * el layout base (Section/Columna/Widget), el reset de heading/texto, el
 * default de <img>, botón/divisor (tan chicos que no ameritan archivo propio),
 * las columnas anidadas de _container, y los dos mecanismos "genéricos"
 * (aplicables a Section/Columna/Widget, no a un tipo de widget puntual):
 * animación de entrada y fondo parallax.
 *
 * Parte de Karnak_Widget_Assets — ver includes/class-karnak-widget-assets.php.
 * NO dividir más allá de esto: todo lo de acá abajo se necesita siempre que
 * exista contenido Karnak, así que no hay nada que ganar condicionándolo.
 */

.karnak-layout { width: 100%; }

/* ── Fondo parallax (Section/Column/Widget → attrs.parallaxBg) ──────────── */
.karnak-parallax-host { position: relative; overflow: hidden; }
.karnak-parallax-bg {
    position: absolute;
    top: -20%; left: -5%; right: -5%; bottom: -20%; /* margen extra para que la traslación no deje bordes vacíos */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}
/* El contenido real tiene que pintarse arriba del fondo parallax */
.karnak-parallax-host > :not(.karnak-parallax-bg) {
    position: relative;
    z-index: 1;
}

.karnak-section {
    width: 100%;
    padding: 20px 20px;
}
/* "Completo": la Section rompe el ancho de SU contenedor (el .ast-container del
   theme, un <article>, etc.) para llegar de verdad al borde del viewport —
   fórmula clásica de "stretch section", misma que usa .alignfull de Astra/Gutenberg. */
.karnak-section-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.karnak-columns {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.karnak-cols-full {
    max-width: none;
    width: 100%;
}

.karnak-column {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px;
}

.karnak-widget { margin-bottom: 0; }

/* Con line-height muy bajo (ej. 0) el cuadro de línea colapsa pero las letras
   siguen dibujándose a su tamaño real, y el texto se sale por debajo del
   contenedor superponiéndose con lo que sigue. Este mínimo evita que el
   elemento colapse por debajo de una línea de texto real, sin importar el
   line-height elegido. */
.karnak-widget-heading *,
.karnak-widget-text * {
    /* h1-h6/p traen margin-block del navegador por defecto; el espaciado real lo maneja
       el propio widget (panel Otros → Margin). !important como red de seguridad genérica
       contra temas/plugins con selectores clase+etiqueta (ej. WooCommerce:
       ".woocommerce-js h2{margin-bottom:.7em}", peso 11) — cubre sobre todo el texto
       enriquecido (rich-text) donde no hay una única clase a la que apuntar.
       Descendiente (no ">") a propósito: en el editor el tag real cuelga un nivel más
       adentro (.karnak-widget-content, para el toolbar) que en el front real, donde
       cuelga directo del wrapper — con ">" esta regla no matcheaba nada en el editor. */
    margin: 0 !important;
    min-height: 1em;
}

/* Para el caso normal (heading simple / texto simple, sin rich-text) se apunta además
   directamente al tag renderizado con su propia clase — mismo mecanismo que usa Elementor
   (".elementor-widget-heading .elementor-heading-title", 2 clases = peso 20) para ganarle
   a reglas de terceros por especificidad real, sin depender solo del !important de arriba. */
.karnak-widget-heading .karnak-heading-title,
.karnak-widget-text .karnak-text-content {
    margin: 0;
}

/* Sin esto, el heading hereda el line-height del tema (pensado para párrafos, ~1.4-1.6),
   que con una tipografía grande deja "aire" arriba/abajo del texto dentro de su propia
   caja de línea — se ve como padding pero no lo es. Elementor hace lo mismo por default
   (line-height:1 en .elementor-heading-title) para no depender del tema. Es solo el valor
   inicial: si el usuario define su propio line-height en el panel de Tipografía, esa
   inline style gana igual (line-height está en build_text_styles()). El texto/párrafo NO
   se toca acá — ahí sí conviene el line-height más alto del tema para que se lea bien. */
.karnak-heading-title {
    line-height: .9;
}

.karnak-widget img { max-width: 100%; height: auto; display: block; }

/* Widget Imagen sin imagen elegida (o token dinámico que resolvió vacío) —
   antes esto solo tenía CSS en karnak-canvas.css (editor), y el overlay de
   sync del canvas pisaba el placeholder de buildPreview() con el <img src="">
   vacío que devolvía este mismo render_widget() sin ningún estilo que lo
   hiciera visible — el placeholder "desaparecía" apenas se soltaba el widget
   (bug 2026-08-27). Real acá para que se vea igual en editor y sitio real. */
.karnak-img-placeholder {
    background: #f0f0f0;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    border-radius: 4px;
}

/* Imagen widget: cambio de imagen al hacer scroll (attrs.scrollImg) — dentro de
   cualquier header sticky, con o sin "Cambio de fondo al hacer scroll" (scroll-fx)
   activado; deliberadamente NO exige .karnak-header--scroll-fx (a diferencia del
   cambio de fondo, en Karnak_Theme_Builder::header_fx_css()), para poder cambiar el
   logo sin necesitar también el cambio de color. El show/hide es puro CSS, sin JS
   propio: reutiliza la misma clase .karnak-header--scrolled que togglea
   initStickyHeaderFx() (módulo sticky-header, enganchado a .karnak-header--sticky).
   !important porque cada <img> ya trae su propio display:block inline
   (Karnak_Renderer::render_widget()). */
.karnak-img-scroll-alt { display: none !important; }
.karnak-header--scrolled .karnak-img-default { display: none !important; }
.karnak-header--scrolled .karnak-img-scroll-alt { display: block !important; }

.karnak-btn {
    display: inline-block;
    padding: var(--karnak-btn-py, 8px) var(--karnak-btn-px, 20px);
    background: var(--karnak-btn-bg, #ff9900);
    color: var(--karnak-btn-color, #fff);
    border-radius: var(--karnak-btn-radius, 5px);
    font-family: var(--karnak-btn-family, inherit) !important;
    font-size: var(--karnak-btn-size, 14px);
    font-weight: var(--karnak-btn-weight, 600);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.karnak-btn:hover { background: var(--karnak-btn-bg, #ff9900); filter: brightness(.85); color: var(--karnak-btn-color, #fff); }

.karnak-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 16px 0;
}

.karnak-nested-columns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.karnak-nested-column {
    flex: 1;
    min-width: 0;
    padding: 10px;
}

@media (max-width: 768px) {
    .karnak-columns,
    .karnak-nested-columns { flex-direction: column; }
}

/* ── Animaciones de entrada (Otros → Animación, cualquier Section/Columna/Widget) ── */
@keyframes knkFadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}
@keyframes knkFadeInUp {
    from { opacity: 0; transform: translateY(30px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkFadeInDown {
    from { opacity: 0; transform: translateY(-30px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkFadeInLeft {
    from { opacity: 0; transform: translateX(-30px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkFadeInRight {
    from { opacity: 0; transform: translateX(30px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkZoomIn {
    from { opacity: 0; transform: scale(0.6) }
    to   { opacity: 1; transform: none }
}
@keyframes knkZoomInUp {
    from { opacity: 0; transform: scale(0.4) translateY(40px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkSlideInUp {
    from { opacity: 0; transform: translateY(60px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkSlideInLeft {
    from { opacity: 0; transform: translateX(-60px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkSlideInRight {
    from { opacity: 0; transform: translateX(60px) }
    to   { opacity: 1; transform: none }
}
@keyframes knkBounceIn {
    0%   { opacity: 0; transform: scale(0.3) }
    50%  { opacity: 1; transform: scale(1.05) }
    70%  { transform: scale(0.9) }
    100% { opacity: 1; transform: scale(1) }
}

[data-knk-anim] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    [data-knk-anim] { opacity: 1 !important; animation: none !important; }
}