/* =====================================================
ANDES · Ornamentos decorativos (overlay helpers)
- No desplaza layout
- Z-index superior
- Posición: edge / inside / outside
- Repeat: x / y / both / none
===================================================== */

/* Host: el contenedor que recibe ornamentos */
.la-deco-host {
    position: relative;
    isolation: isolate; /* stacking context propio */
}

/* Base */
.la-deco {
    position: absolute;
    z-index: 9999;
    pointer-events: none;

    display: block;
    line-height: 0;
    font-size: 0;

    /* imagen */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* offsets configurables */
    --deco-offset: 0px; /* distancia extra respecto al borde */
    --deco-shift-x: 0px; /* ajuste fino horizontal */
    --deco-shift-y: 0px; /* ajuste fino vertical */

    --deco-rotate: 0deg; /* ajuste rotación */

    /* IMPORTANTÍSIMO:
       usamos `translate` para NO colisionar con transforms de centrado u otros */
    translate: var(--deco-shift-x) var(--deco-shift-y);
    rotate: var(--deco-rotate);
}

/* ------------------------------
   Tamaños estándar (puede ampliar)
-------------------------------- */
.la-deco--h-16 {
    height: 16px;
}

.la-deco--h-24 {
    height: 24px;
}

.la-deco--h-32 {
    height: 32px;
}

.la-deco--h-48 {
    height: 48px;
}

.la-deco--h-64 {
    height: 64px;
}
.la-deco--h-100 {
    height: 100px;
}

.la-deco--h-150 {
    height: 150px;
}

.la-deco--h-160 {
    height: 160px;
}

.la-deco--h-200 {
    height: 200px;
}

.la-deco--h-220 {
    height: 220px;
}

.la-deco--h-240 {
    height: 240px;
}

.la-deco--w-48 {
    width: 48px;
}

.la-deco--w-64 {
    width: 64px;
}

.la-deco--w-96 {
    width: 96px;
}

.la-deco--w-100 {
    width: 100px;
}

.la-deco--w-160 {
    width: 160px;
}

.la-deco--w-200 {
    width: 200px;
}

.la-deco--w-220 {
    width: 220px;
}

.la-deco--w-240 {
    width: 240px;
}

.la-deco--w-320 {
    width: 320px;
}

/* Extremos (cinta o borde completo) */
.la-deco--edge-x {
    width: 100%;
    left: 0;
    right: 0;
}

.la-deco--edge-y {
    height: 100%;
    top: 0;
    bottom: 0;
}

/* ------------------------------
   Repetición
-------------------------------- */
.la-deco--repeat-none {
    background-repeat: no-repeat;
}

.la-deco--repeat-x {
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.la-deco--repeat-y {
    background-repeat: repeat-y;
    background-size: 100% auto;
}

.la-deco--repeat {
    background-repeat: repeat;
    background-size: auto;
}

/* ------------------------------
   Posición base (anclaje)
   Estas clases NO definen inside/outside,
   solo el lado al que se ancla.
-------------------------------- */
.la-deco--top {
    top: 0;
}

.la-deco--bottom {
    bottom: 0;
}

.la-deco--left {
    left: 0;
}

.la-deco--right {
    right: 0;
}

/* Centrado (SIN transform, para no pisar el shift) */
.la-deco--center-x {
    left: 50%;
    translate: calc(-50% + var(--deco-shift-x, 0px)) var(--deco-shift-y, 0px);
}

.la-deco--center-y {
    top: 50%;
    translate: var(--deco-shift-x, 0px) calc(-50% + var(--deco-shift-y, 0px));
}

.la-deco--center {
    left: 50%;
    top: 50%;
    translate: calc(-50% + var(--deco-shift-x, 0px)) calc(-50% + var(--deco-shift-y, 0px));
}

/* Esquinas rápidas */
.la-deco--tl {
    top: 0;
    left: 0;
}

.la-deco--tr {
    top: 0;
    right: 0;
}

.la-deco--bl {
    bottom: 0;
    left: 0;
}

.la-deco--br {
    bottom: 0;
    right: 0;
}

/* ------------------------------
   MODO: edge / inside / outside
   - edge: exactamente en el borde
   - inside: dentro del componente (hacia adentro)
   - outside: fuera del componente (hacia afuera)
-------------------------------- */

/* EDGE (exacto al borde) */
.la-deco--edge { /* marca semántica */
}

/* INSIDE: empuja hacia el interior */
.la-deco--inside.la-deco--top {
    top: var(--deco-offset);
}

.la-deco--inside.la-deco--bottom {
    bottom: var(--deco-offset);
}

.la-deco--inside.la-deco--left {
    left: var(--deco-offset);
}

.la-deco--inside.la-deco--right {
    right: var(--deco-offset);
}

/* OUTSIDE: empuja hacia el exterior */
.la-deco--outside.la-deco--top {
    top: calc(var(--deco-offset) * -1);
}

.la-deco--outside.la-deco--bottom {
    bottom: calc(var(--deco-offset) * -1);
}

.la-deco--outside.la-deco--left {
    left: calc(var(--deco-offset) * -1);
}

.la-deco--outside.la-deco--right {
    right: calc(var(--deco-offset) * -1);
}

/* Correcciones finas (compatibilidad / semántica)
   Ya no es obligatorio, pero lo dejamos por si lo usan */
.la-deco--shift {
    translate: var(--deco-shift-x) var(--deco-shift-y);
}

/* ------------------------------
   Utilitarios de offset rápidos
-------------------------------- */
.la-deco--o-0 {
    --deco-offset: 0px;
}

.la-deco--o-1 {
    --deco-offset: 1px;
}

.la-deco--o-2 {
    --deco-offset: 2px;
}

.la-deco--o-4 {
    --deco-offset: 4px;
}

.la-deco--o-8 {
    --deco-offset: 8px;
}

.la-deco--o-12 {
    --deco-offset: 12px;
}

.la-deco--o-16 {
    --deco-offset: 16px;
}

.la-deco--o-24 {
    --deco-offset: 24px;
}

/* Estilo opcional */
.la-deco--soft {
    opacity: 0.35;
}

/* =====================================================
   ANDES · Motivos ornamentales
   Ubicación: /themes/infinia/images/motifs/
   ===================================================== */

.la-motif--condor {
    background-image: url("../images/motifs/condor.png");
}

.la-motif--dualidad {
    background-image: url("../images/motifs/dualidad.png");
}

.la-motif--flor-de-cantuta {
    background-image: url("../images/motifs/flor_de_cantuta.png");
}

.la-motif--formas-geometricas {
    background-image: url("../images/motifs/formas_geometricas.png");
}

.la-motif--formas {
    background-image: url("../images/motifs/formas.png");
}

.la-motif--mix-condor-flor {
    background-image: url("../images/motifs/mix_condor_flor.png");
}

.la-motif--ondas {
    background-image: url("../images/motifs/ondas.png");
}

.la-motif--puma {
    background-image: url("../images/motifs/puma.png");
}

.la-motif--trilogia-andina {
    background-image: url("../images/motifs/trilogia-andina.png");
}