/**
 * Iconografía Pro — Creative Elements widget
 * @author Z Digital
 */

/* ======================================================================
 * Tokens
 * ====================================================================== */
.zif {
    --zif-ac: #f47b20;
    --zif-cols-d: 4;
    --zif-cols-t: 2;
    --zif-cols-m: 1;
    --zif-sw: 1.4;
    --zif-dur: 700ms;
    --zif-stagger: 130ms;
    --zif-glow: rgba(244, 123, 32, .55);
    --zif-gap-def: 24px;
    position: relative;
    box-sizing: border-box;
}
.zif *,
.zif *::before,
.zif *::after { box-sizing: border-box; }

.zif--dark {
    --zif-bg: #0e0e0f;
    --zif-fg: #ffffff;
    --zif-muted: rgba(255, 255, 255, .74);
    --zif-divider: rgba(255, 255, 255, .2);
    --zif-card: rgba(255, 255, 255, .04);
    --zif-card-bd: rgba(255, 255, 255, .1);
    --zif-ic: #ffffff;
    --zif-shadow-soft: 0 10px 30px rgba(0, 0, 0, .25);
    --zif-shadow-strong: 0 22px 50px rgba(0, 0, 0, .45);
}
.zif--light {
    --zif-bg: #ffffff;
    --zif-fg: #141414;
    --zif-muted: #5c5c5c;
    --zif-divider: rgba(0, 0, 0, .12);
    --zif-card: #ffffff;
    --zif-card-bd: #ececec;
    --zif-ic: #141414;
    --zif-shadow-soft: 0 10px 30px rgba(15, 15, 30, .08);
    --zif-shadow-strong: 0 22px 50px rgba(15, 15, 30, .16);
}

/* ======================================================================
 * Container
 * ====================================================================== */
.zif-inner {
    position: relative;
    isolation: isolate;
    max-width: var(--zif-maxw, none);
    margin: 0 auto;
    padding: var(--zif-pad-y, 48px) var(--zif-pad-x, 32px);
    background: var(--zif-bg);
    border-radius: var(--zif-radius, 0);
    box-shadow: var(--zif-shadow, none);
    color: var(--zif-fg);
    overflow: hidden;
}
.zif--bg-none .zif-inner { background: transparent; }
.zif--bg-image .zif-inner {
    background-color: var(--zif-bg);
    background-size: cover;
    background-position: center;
}
.zif--bg-image .zif-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zif-overlay, rgba(0, 0, 0, .72));
}
.zif--sh-none { --zif-shadow: none !important; }
.zif--sh-soft { --zif-shadow: var(--zif-shadow-soft) !important; }
.zif--sh-strong { --zif-shadow: var(--zif-shadow-strong) !important; }

/* ======================================================================
 * Section title (two / three colours)
 * ====================================================================== */
.zif-head {
    margin-bottom: var(--zif-head-gap, 40px);
    text-align: center;
}
.zif-head--left { text-align: left; }
.zif-head--right { text-align: right; }
.zif-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--zif-ac);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.zif-title {
    margin: 0;
    color: var(--zif-fg);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.zif-t1 { color: var(--zif-t1, var(--zif-fg)); }
.zif-t2 { color: var(--zif-t2, var(--zif-ac)); }
.zif-t3 { color: var(--zif-t3, var(--zif-fg)); }
.zif-title--lines .zif-tp { display: block; }
.zif-t2.zif-grad {
    background-image: linear-gradient(90deg, var(--zif-t2, var(--zif-ac)), var(--zif-t2b, #ffb347));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.zif-head-bar {
    display: block;
    width: 64px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: var(--zif-ac);
}
.zif-head--left .zif-head-bar { margin-left: 0; }
.zif-head--right .zif-head-bar { margin-right: 0; }
.zif-sub {
    max-width: 680px;
    margin: 14px auto 0;
    color: var(--zif-muted);
    font-size: 16px;
    line-height: 1.55;
}
.zif-head--left .zif-sub { margin-left: 0; }
.zif-head--right .zif-sub { margin-right: 0; }

/* ======================================================================
 * Grid + dividers
 * ====================================================================== */
.zif-grid {
    display: grid;
    grid-template-columns: repeat(var(--zif-cols-d), minmax(0, 1fr));
    gap: var(--zif-gap, var(--zif-gap-def));
}
.zif-item {
    position: relative;
    min-width: 0;
}
/* Each block draws its divider on its right, in the middle of the gap; the
   last column's divider falls outside the grid and is clipped. */
.zif--div .zif-grid { clip-path: inset(-80px 0); }
.zif--div .zif-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--zif-gap, var(--zif-gap-def)) / -2 - .5px);
    width: 1px;
    height: var(--zif-divh, 70%);
    transform: translateY(-50%);
    background: var(--zif-divider);
    pointer-events: none;
}

/* ======================================================================
 * Block
 * ====================================================================== */
.zif-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, background-color .4s, border-color .4s;
}
a.zif-card:hover,
a.zif-card:focus { color: inherit; text-decoration: none; }
.zif--al-center .zif-card { align-items: center; text-align: center; }
.zif--al-left .zif-card { align-items: flex-start; text-align: left; }

.zif--pos-left .zif-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
}
.zif--pos-left.zif--al-center .zif-card { justify-content: center; }
.zif-body { min-width: 0; }

.zif-item-title {
    margin: 0;
    color: var(--zif-it, var(--zif-fg));
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.zif-item-accent { color: var(--zif-ia, var(--zif-ac)); }
.zif--abreak .zif-item-accent { display: block; }
.zif-text {
    margin: 8px 0 0;
    color: var(--zif-muted);
    font-size: 15px;
    line-height: 1.5;
}
.zif-num {
    display: block;
    margin-bottom: 6px;
    color: var(--zif-ac);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
}
.zif-bar {
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--zif-ac);
    transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.zif--al-center .zif-bar { margin-left: auto; margin-right: auto; }
.zif--hv-underline .zif-bar { width: 0; }
.zif--tpl-line .zif-bar { width: 32px; }
.zif--hv-underline .zif-card:hover .zif-bar { width: 64px; }

/* ======================================================================
 * Icon
 * ====================================================================== */
.zif-icon {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.zif-shape {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .35s, border-color .35s, box-shadow .35s;
}
.zif-svg {
    display: block;
    width: var(--zif-isize, 56px);
    height: var(--zif-isize, 56px);
    overflow: visible;
    fill: none;
    stroke-width: var(--zif-sw);
}
.zif-svg .zif-m { stroke: var(--zif-ic); transition: stroke .3s; }
.zif-svg .zif-a { stroke: var(--zif-ac); transition: stroke .3s; }
.zif-card:hover .zif-svg .zif-m { stroke: var(--zif-ic-h, var(--zif-ic)); }
.zif-icon i {
    display: block;
    color: var(--zif-ic);
    font-size: var(--zif-isize, 56px);
    transition: color .3s;
}
.zif-card:hover .zif-icon i { color: var(--zif-ic-h, var(--zif-ic)); }
.zif-icon img {
    display: block;
    width: var(--zif-isize, 56px);
    height: var(--zif-isize, 56px);
    object-fit: contain;
}
.zif--glow .zif-svg,
.zif--glow .zif-icon i,
.zif--glow .zif-icon img { filter: drop-shadow(0 0 7px var(--zif-glow)); }

/* shapes */
.zif--shape-circle .zif-shape,
.zif--shape-rounded .zif-shape,
.zif--shape-hexagon .zif-shape,
.zif--shape-ring .zif-shape {
    width: var(--zif-box, 84px);
    height: var(--zif-box, 84px);
    --zif-isize-in: calc(var(--zif-box, 84px) * .5);
}
.zif--shape-circle .zif-shape,
.zif--shape-rounded .zif-shape,
.zif--shape-hexagon .zif-shape {
    background: var(--zif-shape-bg, rgba(244, 123, 32, .12));
    background: var(--zif-shape-bg, color-mix(in srgb, var(--zif-ac) 13%, transparent));
    border: 1px solid var(--zif-shape-bd, transparent);
}
.zif--shape-circle .zif-shape { border-radius: 50%; }
.zif--shape-rounded .zif-shape { border-radius: 22%; }
.zif--shape-hexagon .zif-shape {
    border: 0;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.zif--shape-ring .zif-shape {
    border-radius: 50%;
    border: 1.5px solid var(--zif-shape-bd, var(--zif-ac));
    background: var(--zif-shape-bg, transparent);
}
.zif--shape-ring .zif-shape::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed var(--zif-shape-bd, var(--zif-ac));
    opacity: .45;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity .4s;
}
.zif--shape-ring .zif-card:hover .zif-shape::after { transform: rotate(180deg); opacity: .9; }
/* inside a shape the icon defaults to half of the shape */
.zif:not(.zif--shape-none) .zif-svg,
.zif:not(.zif--shape-none) .zif-icon img {
    width: var(--zif-isize, var(--zif-isize-in));
    height: var(--zif-isize, var(--zif-isize-in));
}
.zif:not(.zif--shape-none) .zif-icon i { font-size: var(--zif-isize, var(--zif-isize-in)); }

/* ======================================================================
 * Template 1 · Floating bar
 * ====================================================================== */
.zif--tpl-bar {
    --zif-gap-def: 40px;
    --zif-divh: 55%;
}
.zif--tpl-bar .zif-inner {
    padding: var(--zif-pad-y, 30px) var(--zif-pad-x, 48px);
    border-radius: var(--zif-radius, 16px);
    box-shadow: var(--zif-shadow, var(--zif-shadow-strong));
}
.zif--tpl-bar.zif--dark .zif-inner {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
}
.zif--tpl-bar.zif--bg-gradient .zif-inner,
.zif--tpl-bar.zif--bg-none .zif-inner { background-image: none; }
.zif--tpl-bar.zif--shape-none .zif-svg,
.zif--tpl-bar.zif--shape-none .zif-icon img {
    width: var(--zif-isize, 46px);
    height: var(--zif-isize, 46px);
}
.zif--tpl-bar.zif--shape-none .zif-icon i { font-size: var(--zif-isize, 46px); }
.zif--tpl-bar .zif-item-title { font-size: 15px; }
.zif--tpl-bar .zif-text { margin-top: 4px; font-size: 14px; }
.zif--tpl-bar .zif-card { gap: 16px; }

/* ======================================================================
 * Template 2 · Centred columns
 * ====================================================================== */
.zif--tpl-columns { --zif-divh: 80%; --zif-gap-def: 48px; }
.zif--tpl-columns .zif-inner { padding: var(--zif-pad-y, 56px) var(--zif-pad-x, 32px); }
.zif--tpl-columns.zif--shape-none .zif-svg,
.zif--tpl-columns.zif--shape-none .zif-icon img {
    width: var(--zif-isize, 64px);
    height: var(--zif-isize, 64px);
}
.zif--tpl-columns.zif--shape-none .zif-icon i { font-size: var(--zif-isize, 64px); }
.zif--tpl-columns .zif-item-title { font-size: 17px; }

/* ======================================================================
 * Template 3 · Cards
 * ====================================================================== */
.zif--tpl-cards .zif-card {
    padding: 30px 26px;
    overflow: hidden;
    border: 1px solid var(--zif-card-bd);
    border-radius: var(--zif-card-r, 18px);
    background: var(--zif-card);
}
.zif--tpl-cards .zif-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zif-ac), transparent);
    transform: scaleX(.2);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.zif--tpl-cards .zif-card:hover::before { transform: scaleX(1); }
.zif--tpl-cards.zif--al-center .zif-card::before {
    background: linear-gradient(90deg, transparent, var(--zif-ac), transparent);
    transform-origin: center;
}
.zif--tpl-cards { --zif-box: 68px; }

/* ======================================================================
 * Template 4 · Rings
 * ====================================================================== */
.zif--tpl-rings { --zif-box: 96px; --zif-gap-def: 32px; }
.zif--tpl-rings .zif-card {
    padding: 34px 22px 30px;
    border-radius: var(--zif-card-r, 22px);
    background: var(--zif-card-rings, transparent);
    border: 1px solid transparent;
}
.zif--tpl-rings .zif-icon { margin: 9px; }
.zif--tpl-rings .zif-shape {
    box-shadow: 0 0 0 0 transparent;
}
.zif--tpl-rings .zif-card:hover .zif-shape {
    box-shadow: 0 0 26px -4px var(--zif-glow);
}

/* ======================================================================
 * Template 5 · Minimal line
 * ====================================================================== */
.zif--tpl-line { --zif-gap-def: 36px; }
.zif--tpl-line .zif-card {
    align-items: flex-start;
    padding-top: 26px;
    border-top: 1px solid var(--zif-divider);
}
.zif--tpl-line.zif--pos-left .zif-card { align-items: flex-start; }
.zif--tpl-line .zif-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--zif-ac);
    transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
.zif--tpl-line .zif-card:hover::before { width: 100%; }
.zif--tpl-line.zif--al-center .zif-card::before { left: 50%; transform: translateX(-50%); }
.zif--tpl-line.zif--shape-none .zif-svg,
.zif--tpl-line.zif--shape-none .zif-icon img {
    width: var(--zif-isize, 44px);
    height: var(--zif-isize, 44px);
}
.zif--tpl-line.zif--shape-none .zif-icon i { font-size: var(--zif-isize, 44px); }
.zif--tpl-line .zif-item-title { font-size: 16px; }

/* ======================================================================
 * Block hover
 * ====================================================================== */
.zif--hv-lift .zif-card:hover { transform: translateY(-8px); }
.zif--hv-lift.zif--tpl-cards .zif-card:hover,
.zif--hv-lift.zif--tpl-rings .zif-card:hover { box-shadow: var(--zif-shadow-soft); }
.zif--hv-glow .zif-card { border-radius: var(--zif-card-r, 18px); }
.zif--hv-glow .zif-card:hover {
    border-color: var(--zif-ac);
    box-shadow: 0 0 0 1px var(--zif-ac), 0 14px 40px -12px var(--zif-glow);
}
.zif--hv-fill .zif-card { border-radius: var(--zif-card-r, 14px); }
.zif--hv-fill .zif-card:hover {
    background: rgba(244, 123, 32, .08);
    background: color-mix(in srgb, var(--zif-ac) 9%, transparent);
}
.zif--hv-fill:not(.zif--tpl-cards):not(.zif--tpl-rings) .zif-card { padding: 16px; margin: -16px; height: calc(100% + 32px); }

/* ======================================================================
 * Icon hover
 * ====================================================================== */
.zif--ih-bounce .zif-card:hover .zif-shape { animation: zif-bounce .8s ease; }
.zif--ih-rotate .zif-card:hover .zif-shape > * { animation: zif-rotate .8s cubic-bezier(.3, .7, .3, 1); }
.zif--ih-pulse .zif-card:hover .zif-shape { animation: zif-pulse .7s ease; }
.zif--ih-swing .zif-card:hover .zif-shape > * { animation: zif-swing .9s ease; transform-origin: 50% 0; }
.zif--ih-flip .zif-card:hover .zif-shape > * { animation: zif-flip .8s ease; }
.zif--ih-tada .zif-card:hover .zif-shape { animation: zif-tada .9s ease; }
.zif--ih-draw .zif-card:hover .zif-svg .zif-m > * { animation: zif-draw 1s ease both; }
.zif--ih-draw .zif-card:hover .zif-svg .zif-a > * { animation: zif-draw .8s .35s ease both; }

@keyframes zif-bounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-12px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-5px); }
}
@keyframes zif-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes zif-pulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.16); }
}
@keyframes zif-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}
@keyframes zif-flip {
    from { transform: perspective(400px) rotateY(0); }
    to { transform: perspective(400px) rotateY(360deg); }
}
@keyframes zif-tada {
    0%, 100% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
@keyframes zif-draw {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

/* ======================================================================
 * Idle animations (on the outer .zif-icon, independent of hover)
 * ====================================================================== */
.zif--idle-float .zif-icon { animation: zif-float 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.6s); }
.zif--idle-pulse .zif-icon { animation: zif-breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s); }
.zif--idle-glow .zif-icon { animation: zif-glowpulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
.zif--idle-spin .zif-shape::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed var(--zif-ac);
    opacity: .55;
    animation: zif-rotate 14s linear infinite;
}
.zif--idle-spin.zif--shape-ring .zif-shape::after { display: none; }
.zif--idle-spin.zif--shape-none .zif-shape { padding: 12px; }
.zif--idle-spin.zif--shape-none .zif-shape::before { inset: -2px; }
.zif--idle-spin.zif--shape-hexagon .zif-shape::before { display: none; }

@keyframes zif-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes zif-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
@keyframes zif-glowpulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 12px var(--zif-glow)); }
}

/* ======================================================================
 * Entrance
 * ====================================================================== */
.zif--anim .zif-an {
    opacity: 0;
    transition: opacity var(--zif-dur) ease, transform var(--zif-dur) cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * var(--zif-stagger) + 120ms);
}
.zif--anim .zif-head { --i: -1; transition-delay: 0ms; }
.zif--anim[data-entrance="fade-up"] .zif-an { transform: translateY(30px); }
.zif--anim[data-entrance="zoom"] .zif-an { transform: scale(.86); }
.zif--anim[data-entrance="slide"] .zif-an { transform: translateX(-36px); }
.zif--anim[data-entrance="flip"] .zif-an { transform: perspective(700px) rotateX(-65deg); transform-origin: 50% 0; }
.zif--anim[data-entrance="draw"] .zif-an { transform: translateY(14px); }
.zif--anim[data-entrance="draw"] .zif-svg g > * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s cubic-bezier(.6, .1, .3, 1);
    transition-delay: calc(var(--i, 0) * var(--zif-stagger) + 300ms);
}
.zif--anim[data-entrance="draw"] .zif-svg .zif-a > * {
    transition-delay: calc(var(--i, 0) * var(--zif-stagger) + 900ms);
}
.zif--anim.zif-in .zif-an { opacity: 1; transform: none; }
.zif--anim.zif-in[data-entrance="draw"] .zif-svg g > * { stroke-dashoffset: 0; }

/* ======================================================================
 * Responsive
 * ====================================================================== */
@media (max-width: 1024px) {
    .zif-grid { grid-template-columns: repeat(var(--zif-cols-t), minmax(0, 1fr)); }
    .zif--tpl-bar .zif-inner { padding: var(--zif-pad-y, 26px) var(--zif-pad-x, 28px); }
    .zif--nodiv-t .zif-item::after { display: none; }
}
@media (max-width: 767px) {
    .zif-grid { grid-template-columns: repeat(var(--zif-cols-m), minmax(0, 1fr)); }
    .zif-inner { padding: var(--zif-pad-y, 36px) var(--zif-pad-x, 20px); }
    .zif--tpl-bar .zif-inner { padding: var(--zif-pad-y, 22px) var(--zif-pad-x, 20px); }
    .zif--nodiv-m .zif-item::after { display: none; }
    .zif--hv-fill:not(.zif--tpl-cards):not(.zif--tpl-rings) .zif-card { margin: 0; height: 100%; }

    .zif--mscroll .zif-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        clip-path: none;
        margin: 0 calc(var(--zif-pad-x, 20px) * -1);
        padding: 12px var(--zif-pad-x, 20px);
        scroll-padding: 0 var(--zif-pad-x, 20px);
    }
    .zif--mscroll .zif-grid::-webkit-scrollbar { display: none; }
    .zif--mscroll .zif-item {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
    .zif--mscroll .zif-item::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .zif .zif-an { opacity: 1 !important; transform: none !important; transition: none !important; }
    .zif .zif-svg g > * { stroke-dashoffset: 0 !important; transition: none !important; }
    .zif .zif-icon,
    .zif .zif-shape,
    .zif .zif-shape > *,
    .zif .zif-shape::before,
    .zif .zif-svg g > * { animation: none !important; }
}

.zif-empty {
    padding: 24px;
    border: 1px dashed #c8c8c8;
    color: #777;
    text-align: center;
}