/* ======================================
   Utils.css – Framework de utilidades
   Convención numérica en REM:
   .p_25 = .25rem, .p_50 = .5rem, .p_100 = 1rem...
   ====================================== */
:root {

   /* =========================
   SLATE
   ========================= */
   --cl-slate-400: #94a3b8;
   --cl-slate-500: #64748b;
   --cl-slate-600: #475569;
   --cl-slate-700: #334155;
   --cl-slate-800: #233143;
   --cl-slate-900: #131e2d;

   /* =========================
   LIGHT SURFACES SCALE
   ========================= */
   --surface-deep:     #fafafa; /* fondo general */
   --surface-base:     #f4f7ff; /* fondo general */
   --surface-raised:   #ffffff; /* cards principales */
   --surface-elevated: #f1f5ff; /* cards dentro */
   --surface-overlay:  #e7eeff; /* dropdowns / popups */
   --surface-floating: #dde6ff; /* tooltips / destacados */

   /* =========================
   BORDER SCALE GLOBAL
   ========================= */
   --border-strong: rgba(226,232,240,1);   /* fuerte */
   --border-normal: rgba(226,232,240,.85); /* normal */
   --border-soft:   rgba(226,232,240,.55); /* suave */
   --border-subtle: rgba(226,232,240,.25); /* muy leve */
   --border-ghost:  rgba(226,232,240,.12); /* casi invisible */

   /* =========================
   ACCENT / INTERACTIVE
   ========================= */
   --accent-base:#5a43d6;
   --accent-hover:#6b57e0;
   --accent-active:#4a36bd;

   --accent-focus:rgba(74, 54, 189, 0.3);

   /* =========================
      BADGES
   ========================= */
   --badge-info-color:#1d4ed8;
   --badge-info-bg:rgba(37,99,235,.08);
   --badge-info-border:rgba(37,99,235,.25);

   --badge-info-s1-color:#16a34a;
   --badge-info-s1-bg:rgba(22,163,74,.08);
   --badge-info-s1-border:rgba(22,163,74,.25);

   /* ========= DANGER (ELIMINAR) ========= */
   --cl-accent-red:#dc2626;
   --cl-accent-red-bg:rgba(220,38,38,.08);
   --cl-accent-red-border:rgba(220,38,38,.25);

   /* ========= CLOSE (ELIMINAR) ========= */
   --cl-close:#9ca3af;
   --cl-close-bg:rgba(156,163,175,.08);
   --cl-close-border:rgba(156,163,175,.25);

   --cl-main: #f43f5e; /*#1157ee - color principal */
   --cl-rgb-main: 244, 63, 94; /*17, 87, 238 - color principal */
   --cl-main-s1: #f43f5e; /*#f43f5e - color principal */

   --bg-main: #ffffff;
   --bg-rgb-main: 255, 255, 255;

   --bg-gradient-main: linear-gradient(to left top, #ffffff, #fafafa);
   --bg-static-main: #fafafa;
   --bg-gradient-accent: linear-gradient(
      to right, rgba(244, 63, 94, 0.05),
      rgba(244, 63, 94, 0)
      );
   --bg-static-accent: rgba(244, 63, 94, 0.05);
   --bg-gradient-deactivated: linear-gradient(
      to right, rgba(100, 116, 139, 0.1),
      rgba(100, 116, 139, 0)
      );

   --sd-static: 0 0 0 3px rgba(var(--cl-rgb-main), 0.1);

   --cl-action-add: #d1fae5;
   --cl-action-add-hover: #6EE7B7;

   --cl-txt-static:#25396f;

   --cl-action-copy: #F1F5F9;
   --cl-action-copy-hover: #CBD5E1;
   --cl-action-copy-text: #334155;

   /* cl-sd-main: color shadow main red */
   --cl-sd-main: rgba(0, 0, 0, 0.1);

   /* Colors */
   --cl-bg: #ffffff;

   --cl-txt-mi: #0f0f0f;
   /* lg-primary-radial-s1: gradient radial primary style 1 */
   --lg-primary-radial-s1: radial-gradient(circle at 20% 50%, rgba(255, 61, 2, 0.1) 0%, transparent 50%),
   radial-gradient(circle at 80% 50%, rgba(2, 49, 255, 0.2) 0%, transparent 50%);

   --bg-body: #ffffff;

   --cl-st-50: #f8fafc;

   /* cl-wt-tpr = color white transparent */
   --cl-wt-tpr-10: rgba(255, 255, 255, 0.1);
   --cl-wt-tpr-20: rgba(255, 255, 255, 0.2);
   --cl-wt-tpr-30: rgba(255, 255, 255, 0.3);
   --cl-wt-tpr-40: rgba(255, 255, 255, 0.4);
   --cl-wt-tpr-50: rgba(255, 255, 255, 0.5);
   --cl-wt-tpr-60: rgba(255, 255, 255, 0.6);
   --cl-wt-tpr-70: rgba(255, 255, 255, 0.7);
   --cl-wt-tpr-80: rgba(255, 255, 255, 0.8);
   --cl-wt-tpr-90: rgba(255, 255, 255, 0.9);
   --cl-wt-tpr-100: rgba(255, 255, 255, 1);

   /* cl-bc-tpr = color black transparent */
   --cl-bc-tpr-10: rgba(0, 0, 0, 0.1);
   --cl-bc-tpr-20: rgba(0, 0, 0, 0.2);
   --cl-bc-tpr-30: rgba(0, 0, 0, 0.3);
   --cl-bc-tpr-40: rgba(0, 0, 0, 0.4);
   --cl-bc-tpr-50: rgba(0, 0, 0, 0.5);
   --cl-bc-tpr-60: rgba(0, 0, 0, 0.6);
   --cl-bc-tpr-70: rgba(0, 0, 0, 0.7);
   --cl-bc-tpr-80: rgba(0, 0, 0, 0.8);
   --cl-bc-tpr-90: rgba(0, 0, 0, 0.9);
   --cl-bc-tpr-100: rgba(0, 0, 0, 1);

   --cl-ac: #1157ee;
   --cl-ac-s1: #1157ee;

   --cl-w: #ffffff;
   --cl-b: #000000;

   /* Textos tt = tittle*/
   --cl-txt-tt: #0f172a;
   --cl-tx-tt: #0f172a;

   /* Textos stt = subtitle*/
   --cl-txt-stt: #64748b;
   --cl-tx-stt: #64748b;

   --fs-25: .25rem; /* 4px */
   --fs-50: .50rem; /* 8px */
   --fs-625: .625rem; /* 10px */
   --fs-0688: .688rem; /* 11px */
   --fs-75: .75rem; /* 12px */
   --fs-0875: .875rem; /* 14px */
   --fs-100: 1rem; /* 16px */
   --fs-125: 1.25rem; /* 20px */
   --fs-150: 1.5rem; /* 24px */
   --fs-200: 2rem; /* 32px */

   /* Textos form = form subtitle*/
   --cl-form-lbl: #0f172a;


   /* Border radius */
   --br-25: .25rem; /* 4px */
   --br-50: .50rem; /* 8px */
   --br-75: .75rem; /* 12px */
   --br-0875: .875rem; /* 14px */
   --br-100: 1rem; /* 16px */
   --br-125: 1.25rem; /* 20px */
   --br-150: 1.5rem; /* 24px */
   --br-200: 2rem; /* 32px */

   /* --cl-txt-desc: #0f172a; */
   /* cl-br-nm: color border normal */
   --cl-br-nm: #e5e7eb;
   /* cl-br-in: color border inactivo */
   --cl-br-in: rgba(226, 232, 240, 1);

   /* cl-br-in-s1: color inactivo style 1 */
   --cl-in-s1: #64748b;

   /* cl-br-act: color border activo */
   --cl-br-ac: #5a43d6;
   --cl-br-ac-s1: #5a43d6;

   /* cl-bg-nm: color background normal */
   --cl-bg-nm: #ffffff;

   /* cl-bg-blur: color background para glassmorphism */
   --cl-bg-blur: rgba(255, 255, 255, 0.7);

   /* cl-bg-pmr: color background primary */
   --cl-bg-pmr: #ffffff;
   /* cl-bg-scdr: color background secondary */
   --cl-bg-scdr: #f9fafc;
   /* cl-bg-ter: color background tertiary */
   --cl-bg-ttr: #1157ee;

   /* cl-br-pmr: color border primary */
   --cl-br-pmr: #e2e8f0;
   /* cl-br-scdr: color border secondary */
   --cl-br-scdr: #1e293b;
   /* cl-br-ttr: color border tertiary */
   --cl-br-ttr: #334155;

   --cl-txt-pmr: #0f172a;
   --cl-txt-scdr: #64748b;
   --cl-txt-ttr: #1157ee;

   /* cl-bg-alt: color background alternativo */
   --cl-bg-alt: #f4f5f7;

   /* cl-sd: color shadow */
   --cl-sd: rgba(0, 0, 0, 0.1);
   --cl-sd-dark: rgba(0, 0, 0, 0.2);

   --cl-sd-blue-010: rgba(17, 87, 238, 0.3);

   --cl-blue-s1: #1157ee;

   --cl-black-s1: #111111;

   /* Colores de estado - Success (Verde) */
   --cl-success: #10b981;
   --cl-success-dark: #059669;
   --cl-success-light: #d1fae5;
   --cl-success-text: #065f46;
   --cl-success-text-light: #047857;

   /* Colores de estado - Error (Rojo) */
   --cl-error: #ef4444;
   --cl-error-dark: #dc2626;
   --cl-error-light: #fee2e2;
   --cl-error-text: #991b1b;
   --cl-error-text-light: #dc2626;

   /* Colores de estado - Warning (Naranja) */
   --cl-warning: #f59e0b;
   --cl-warning-dark: #d97706;
   --cl-warning-light: #fef3c7;
   --cl-warning-text: #92400e;
   --cl-warning-text-light: #d97706;

   /* Colores de estado - Info (Azul) */
   --cl-info: #3b82f6;
   --cl-info-dark: #2563eb;
   --cl-info-light: #dbeafe;
   --cl-info-text: #1e40af;
   --cl-info-text-light: #2563eb;

   --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

   --cl-btn-txt-hv: rgba(255, 255, 255, 1);
   --cl-btn-bg-hv: #f3f4f6;
   --cl-btn-bg-ac: #1157ee;
}
   
body.dark_mode {

   /* =========================
   SLATE
   ========================= */
   --cl-slate-400: #3f6289;
   --cl-slate-500: #5c7ea6;
   --cl-slate-600: #7899bf;
   --cl-slate-700: #97b2d1;
   --cl-slate-800: #b8cbe4; 
   --cl-slate-900: #d8e4f5;

   --surface-deep:     #020617; /* inputs, bloques internos, zonas profundas */
   --surface-base:     #000319; /* fondo general */
   --surface-raised:   #000f25; /* cards principales */
   --surface-elevated: #001a3a; /* cards dentro */
   --surface-overlay:  #00244d; /* dropdowns / popups */
   --surface-floating: #003066; /* tooltips / elementos destacados */

   /* =========================
   BORDER SCALE GLOBAL
   ========================= */
   --border-strong: rgba(226,232,240, 0.1);   /* fuerte */
   --border-normal: rgba(226,232,240,.85); /* normal */
   --border-soft:   rgba(226,232,240,.55); /* suave */
   --border-subtle: rgba(226,232,240,.25); /* muy leve */
   --border-ghost:  rgba(226,232,240,.12); /* casi invisible */

   --badge-info-color:#7dd3fc;
   --badge-info-bg:rgba(0,140,255,.08);
   --badge-info-border:rgba(0,140,255,.35);

   --badge-info-s1-color:#86efac;
   --badge-info-s1-bg:rgba(34,197,94,.12);
   --badge-info-s1-border:rgba(34,197,94,.35);

   /* NEON DARK UI */
   --cl-accent-red:#ff4d6d;
   --cl-accent-red-bg:rgba(255,77,109,.10);
   --cl-accent-red-border:rgba(255,77,109,.45);

   /* ========= CLOSE (ELIMINAR) ========= */
   --cl-close:#cbd5f5;
   --cl-close-bg:rgba(203,213,225,.08);
   --cl-close-border:rgba(203,213,225,.25);

   --bg-main: #000319;
   --bg-rgb-main: 0, 3, 25;

   --cl-txt-mi: #e5e7eb;
   --cl-action-add: #10b981;
   --cl-action-add-hover: #0d9f6e;
   --bg-gradient-main: linear-gradient(to left top, #0c0f24, #03071c);
   --bg-static-main: #0c0f24;
   --bg-gradient-accent: linear-gradient(
      to right, #171c33,
      rgba(23, 28, 51, 0)
      );
   --bg-static-accent: #171c33;

   --lg-primary-radial-s1: radial-gradient(circle at 20% 50%, rgba(255, 61, 2, 0.1) 0%, transparent 50%),
   radial-gradient(circle at 80% 50%, rgba(2, 49, 255, 0.1) 0%, transparent 50%);

   --bg-body: #000319;
   --bd-block: 1px solid rgba(255,255,255,0.06);

   --cl-wt-tpr-10: rgba(0, 0, 0, 0.1);
   --cl-wt-tpr-20: rgba(0, 0, 0, 0.2);
   --cl-wt-tpr-30: rgba(0, 0, 0, 0.3);
   --cl-wt-tpr-40: rgba(0, 0, 0, 0.4);
   --cl-wt-tpr-50: rgba(0, 0, 0, 0.5);
   --cl-wt-tpr-60: rgba(0, 0, 0, 0.6);
   --cl-wt-tpr-70: rgba(0, 0, 0, 0.7);
   --cl-wt-tpr-80: rgba(0, 0, 0, 0.8);
   --cl-wt-tpr-90: rgba(0, 0, 0, 0.9);
   --cl-wt-tpr-100: rgba(0, 0, 0, 1);

   --cl-ac-s1: #5280ff;

   --cl-tx-tt: #cdd4df;
   --cl-txt-tt: #ffffff;
   --cl-txt-stt: #b8c0cc;
   --cl-txt-desc: #f0f3f7;
   /* cl-br-nm: color border normal dark mode */
   --cl-br-nm: #3b3b3b;

   /* cl-bg-blur: color background para glassmorphism dark mode */
   --cl-bg-blur: rgba(12, 19, 37, 0.7);

   /* cl-bg-pmr: color background primary */
   --cl-bg-pmr: #0c1325;
   /* cl-bg-scdr: color background secondary */
   --cl-bg-scdr: #1e293b;
   /* cl-bg-ter: color background tertiary */
   --cl-bg-ttr: #334155;

   /* Textos form = form subtitle*/
   --cl-form-lbl: #ffffff;

   /* cl-br-in: color border inactivo dark mode */
   --cl-br-in: rgba(226, 232, 240, 0.1);
   /* cl-br-ac: color border activo dark mode */
   --cl-br-ac: #1d4ed8;
   --cl-br-ac-s1: #5280ff;
   /* cl-br-pmr: color border primary dark mode */
   --cl-br-pmr: #475569;

   --cl-txt-pmr: #f1f5f9;
   --cl-txt-scdr: #9ca3af;
   --cl-txt-ttr: #1d4ed8;

   /* cl-br-scdr: color border secondary dark mode */
   --cl-br-scdr: #1e293b;

   /* cl-br-ttr: color border tertiary dark mode */
   --cl-br-ttr: #334155;

   /* cl-bg-nm: color background normal dark mode */
   --cl-bg-nm: #020617;
   /* cl-bg-alt: color background alternativo dark mode */
   --cl-bg-alt: #020617;

   /* cl-sd: color shadow dark mode */
   --cl-sd: rgba(0, 0, 0, 0.3);
   --cl-sd-dark: rgba(0, 0, 0, 0.5);

   /* cl-sd-main: color shadow main red */
   --cl-sd-main: rgba(0, 0, 0, 0.5); 

   --cl-blue-s2: #5280ff;

   /* Colores de estado Dark Mode - Success (Verde) */
   --cl-success: #10b981;
   --cl-success-dark: #34d399;
   --cl-success-light: rgba(16, 185, 129, 0.15);
   --cl-success-text: #6ee7b7;
   --cl-success-text-light: #a7f3d0;

   /* Colores de estado Dark Mode - Error (Rojo) */
   --cl-error: #ef4444;
   --cl-error-dark: #f87171;
   --cl-error-light: rgba(239, 68, 68, 0.15);
   --cl-error-text: #fca5a5;
   --cl-error-text-light: #fecaca;

   /* Colores de estado Dark Mode - Warning (Naranja) */
   --cl-warning: #f59e0b;
   --cl-warning-dark: #fbbf24;
   --cl-warning-light: rgba(245, 158, 11, 0.15);
   --cl-warning-text: #fcd34d;
   --cl-warning-text-light: #fde68a;

   /* Colores de estado Dark Mode - Info (Azul) */
   --cl-info: #3b82f6;
   --cl-info-dark: #60a5fa;
   --cl-info-light: rgba(59, 130, 246, 0.15);
   --cl-info-text: #93c5fd;
   --cl-info-text-light: #bfdbfe;

   --cl-btn-bg-hv: rgba(17, 87, 238, 0.5);
}


.txt-slate-400{ color:var(--cl-slate-400); }
.txt-slate-500{ color:var(--cl-slate-500); }
.txt-slate-600{ color:var(--cl-slate-600); }
.txt-slate-700{ color:var(--cl-slate-700); }
.txt-slate-800{ color:var(--cl-slate-800); }
.txt-slate-900{ color:var(--cl-slate-900); }

/* =========================
   SURFACES
   ========================= */
.surface-deep{ background:var(--surface-deep); } /* inputs, bloques internos, zonas profundas */
.surface-0{ background:var(--surface-base); } /* fondo general */
.surface-1{ background:var(--surface-raised); } /* cards principales */
.surface-2{ background:var(--surface-elevated); } /* cards dentro */
.surface-3{ background:var(--surface-overlay); } /* dropdowns / popups */
.surface-4{ background:var(--surface-floating); } /* tooltips / destacados */

/* Borders sólidos */
.bd-strong{ border:1px solid var(--border-strong); }
.bd-nm{ border:1px solid var(--border-normal); }
.bd-soft{ border:1px solid var(--border-soft); }
.bd-subtle{ border:1px solid var(--border-subtle); }
.bd-ghost{ border:1px solid var(--border-ghost); }

.bg-accent{ background:var(--accent-base); }
.hover-accent:hover{ background:var(--accent-hover); }
.active-accent:active{ background:var(--accent-active); }


.badge-info{
    background-color: var(--badge-info-bg);
    color: var(--badge-info-color);
    border: 1px solid var(--badge-info-border);
    padding: 2px 8px;
    border-radius: 12px;
}

.badge-info-s1{
    background-color: var(--badge-info-s1-bg);
    color: var(--badge-info-s1-color);
    border: 1px solid var(--badge-info-s1-border);
    padding: 2px 8px;
    border-radius: 12px;
}

/* --------------------------------------
   DISPLAY: dp: display
----------------------------------------- */
.dp_n { display: none; }
.dp_b { display: block; }
.dp_i { display: inline; }
.dp_ib { display: inline-block; }
.dp_f { display: flex; }
.dp_if { display: inline-flex; }
.dp_g { display: grid; }
.dp_ig { display: inline-grid; }

/* --------------------------------------
   FLEX: fd: flex-direction
----------------------------------------- */
.fd_r { flex-direction: row; }
.fd_rr { flex-direction: row-reverse; }
.fd_c { flex-direction: column; }
.fd_cr { flex-direction: column-reverse; }

.fx_1 { flex: 1; }
.fx_auto { flex: auto; }

/* --------------------------------------
   JUSTIFY CONTENT: jc: justify-content
----------------------------------------- */
.jc_c { justify-content: center; }
.jc_fs { justify-content: flex-start; }
.jc_fe { justify-content: flex-end; }
.jc_sb { justify-content: space-between; }
.jc_sa { justify-content: space-around; }
.jc_se { justify-content: space-evenly; }

/* --------------------------------------
   ALIGN ITEMS: ai: align-items
----------------------------------------- */
.ai_c { align-items: center; }
.ai_fs { align-items: flex-start; }
.ai_fe { align-items: flex-end; }
.ai_bl { align-items: baseline; }
.ai_st { align-items: start; }
.ai_en { align-items: end; }
.ai_stch { align-items: stretch; }

/* --------------------------------------
   ALIGN SELF: as: align-self
----------------------------------------- */
.as_c { align-self: center; }
.as_fs { align-self: flex-start; }
.as_fe { align-self: flex-end; }
.as_st { align-self: start; }
.as_en { align-self: end; }
.as_stch { align-self: stretch; }

/* --------------------------------------
   PLACE ITEMS: pi: place-items
----------------------------------------- */
.pi_c { place-items: center; }
.pi_fs { place-items: flex-start; }
.pi_fe { place-items: flex-end; }
.pi_st { place-items: start; }
.pi_en { place-items: end; }
.pi_bl { place-items: baseline; }
.pi_stch { place-items: stretch; }

/* --------------------------------------
   GAP (REM con tu sistema): gp: gap
----------------------------------------- */
.gp_25  { gap: .25rem; } /* 4px */
.gp_50  { gap: .50rem; } /* 8px */
.gp_75  { gap: .75rem; } /* 12px */
.gp_100 { gap: 1rem; } /* 16px */
.gp_150 { gap: 1.5rem; } /* 24px */
.gp_200 { gap: 2rem; } /* 32px */
.gp_250 { gap: 2.5rem; } /* 40px */
.gp_300 { gap: 3rem; } /* 48px */

/* --------------------------------------
   GRID HELPERS: gtc: grid-template-columns, gtr: grid-template-rows
----------------------------------------- */
.gtc_2 { grid-template-columns: repeat(2, 1fr); }
.gtc_3 { grid-template-columns: repeat(3, 1fr); }
.gtc_4 { grid-template-columns: repeat(4, 1fr); }

.gtr_2 { grid-template-rows: repeat(2, 1fr); }
.gtr_3 { grid-template-rows: repeat(3, 1fr); }
.gtr_4 { grid-template-rows: repeat(4, 1fr); }

/* --------------------------------------
   POSITION: ps: position
----------------------------------------- */
.ps_r { position: relative; }
.ps_a { position: absolute; }
.ps_f { position: fixed; }
.ps_s { position: static; }
.ps_st { position: sticky; }

.top_0 { top: 0; }
.left_0 { left: 0; }
.right_0 { right: 0; }
.bottom_0 { bottom: 0; }

.top_8 { top: .8rem; }
.left_8 { left: .8rem; }
.right_8 { right: .8rem; }
.bottom_8 { bottom: .8rem; }

/* --------------------------------------
   OVERFLOW: of: overflow
----------------------------------------- */
.of_h { overflow: hidden; }
.of_v { overflow: visible; }
.of_s { overflow: scroll; }
.of_a { overflow: auto; }

/* --------------------------------------
   VISIBILITY: vs: visibility
----------------------------------------- */
.vs_h { visibility: hidden; }
.vs_v { visibility: visible; }

/* --------------------------------------
   TEXT ALIGN: ta: text-align
----------------------------------------- */
.ta_l { text-align: left; }
.ta_r { text-align: right; }
.ta_c { text-align: center; }
.ta_j { text-align: justify; }

/* --------------------------------------
   BORDER RADIUS (REM numérico): br: border-radius
----------------------------------------- */
.br_25  { border-radius: .25rem; } /* 4px */
.br_50  { border-radius: .50rem; } /* 8px */
.br_75  { border-radius: .75rem; } /* 12px */
.br_100 { border-radius: 1rem; } /* 16px */
.br_125 { border-radius: 1.25rem; } /* 20px */
.br_150 { border-radius: 1.5rem; } /* 24px */
.br_200 { border-radius: 2rem; } /* 32px */

/* Para círculos */
.br_50p { border-radius: 50%; }

/* Border radius por lado (solo esquinas derechas/izquierdas) */
.br_r_50  { border-radius: 0 .50rem .50rem 0; } /* 8px derecha */
.br_r_75  { border-radius: 0 .75rem .75rem 0; } /* 12px derecha */
.br_r_100 { border-radius: 0 1rem 1rem 0; } /* 16px derecha */
.br_l_50  { border-radius: .50rem 0 0 .50rem; } /* 8px izquierda */
.br_l_75  { border-radius: .75rem 0 0 .75rem; } /* 12px izquierda */
.br_l_100 { border-radius: 1rem 0 0 1rem; } /* 16px izquierda */

/* --------------------------------------
   BORDER NORMALES: bd_nm: border normal
----------------------------------------- */
.bd_n { border: none; }
.bd_sl_063 { border: .063rem solid; } /* 1px */
.bd_sl_125 { border: .125rem solid; } /* 2px */
.bd_sl_188 { border: .188rem solid; } /* 3px */

/* --------------------------------------
   BORDER COLORS: bc: border color
----------------------------------------- */
.bc_ac { border-color: var(--cl-br-ac); }
.bc_in { border-color: var(--cl-br-in); }
.bc_n { border-color: var(--cl-br-nm); }

/* Border colors de estado */
.bc_success { border-color: var(--cl-success); }
.bc_error { border-color: var(--cl-error); }
.bc_warning { border-color: var(--cl-warning); }
.bc_info { border-color: var(--cl-info); }

/* --------------------------------------
   BORDER LEFT: bdl: border-left (para alertas)
----------------------------------------- */
.bdl_4 { border-left: 4px solid; }
.bdl_6 { border-left: 6px solid; }

/* Border left con colores */
.bdl_4_success { border-left: 4px solid var(--cl-success); }
.bdl_4_error { border-left: 4px solid var(--cl-error); }
.bdl_4_warning { border-left: 4px solid var(--cl-warning); }
.bdl_4_info { border-left: 4px solid var(--cl-info); }

.effecthv_s1:hover { 
   box-shadow: 0px 0px 25px -13px rgba(17, 87, 238,1);
   border-color: var(--cl-br-ac);
   transform: translateY(-4px); 
} /* Hover border color */
 
/* --------------------------------------
   BACKGROUNDS: bg: background
----------------------------------------- */
.bg_normal { background: var(--cl-bg-nm); }
.bg_alt { background: var(--bg-main); }
.bg_card { background: #000f25; }
.bg_transparent { background: transparent; }

.bg_wt_tpr_10 { background: var(--cl-wt-tpr-10); }
.bg_wt_tpr_20 { background: var(--cl-wt-tpr-20); }
.bg_wt_tpr_30 { background: var(--cl-wt-tpr-30); }
.bg_wt_tpr_40 { background: var(--cl-wt-tpr-40); }
.bg_wt_tpr_50 { background: var(--cl-wt-tpr-50); }
.bg_wt_tpr_60 { background: var(--cl-wt-tpr-60); }
.bg_wt_tpr_70 { background: var(--cl-wt-tpr-70); }
.bg_wt_tpr_80 { background: var(--cl-wt-tpr-80); }
.bg_wt_tpr_90 { background: var(--cl-wt-tpr-90); }
.bg_wt_tpr_100 { background: var(--cl-wt-tpr-100); }

/* Backgrounds de estado */
.bg_success { background: var(--cl-success-light); }
.bg_error { background: var(--cl-error-light); }
.bg_warning { background: var(--cl-warning-light); }
.bg_info { background: var(--cl-info-light); }

/* --------------------------------------
   SHADOWS: sd: box-shadow
----------------------------------------- */
.sd_sm { box-shadow: 0 1px 3px var(--cl-sd); }
.sd_md { box-shadow: 0 4px 6px var(--cl-sd); }
.sd_lg { box-shadow: 0 10px 15px var(--cl-sd); }
.sd_xl { box-shadow: 0 20px 25px var(--cl-sd-dark); }
.sd_n { box-shadow: none; }

.sd_cl_blue_s1 { box-shadow: 0px 0px 29px -17px var(--cl-blue-s1); }

.sd_cl_black_s1 { 
   box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

/* Alias común */
.shadow { box-shadow: 0 4px 6px var(--cl-sd); } /* Igual a sd_md */

/* Shadow Gradient Background - Div separado para el efecto */
.sd_gradient_bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff4400, #0051ff);
  filter: blur(8px);
  z-index: 0;
}

/* --------------------------------------
   CARDS: cards
----------------------------------------- */
.cards-container {
   display: grid;
   /* Ajuste automático de columnas */
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 }

/* --------------------------------------
   COMPONENTS: card
----------------------------------------- */
.card { display: grid; }

/* --------------------------------------
   WIDTH / HEIGHT helpers: w: width, h: height
----------------------------------------- */
.w_100p { width: 100%; }
.h_100p { height: 100%; }
.w_auto { width: auto; }
.h_auto { height: auto; }

/* Height viewport */
.h_100vh { height: 100vh; }
.min_h_100vh { min-height: 100vh; }

/* Max width (responsive containers) */
.max_w_200 { max-width: 200px; }
.max_w_250 { max-width: 250px; }
.max_w_300 { max-width: 300px; }
.max_w_350 { max-width: 350px; }
.max_w_400 { max-width: 400px; }
.max_w_420 { max-width: 420px; }
.max_w_450 { max-width: 450px; }
.max_w_500 { max-width: 500px; }
.max_w_600 { max-width: 600px; }
.max_w_700 { max-width: 700px; }
.max_w_800 { max-width: 800px; }

/* --------------------------------------
   SPACING — PADDING (REM numérico): pd: padding
----------------------------------------- */
.pd_25  { padding: .25rem; } /* 4px */
.pd_50  { padding: .50rem; } /* 8px */
.pd_75  { padding: .75rem; } /* 12px */
.pd_0875 { padding: .875rem; } /* 14px */
.pd_100 { padding: 1rem; } /* 16px */
.pd_125 { padding: 1.25rem; } /* 20px */
.pd_150 { padding: 1.5rem; } /* 24px */
.pd_175 { padding: 1.75rem; } /* 28px */
.pd_200 { padding: 2rem; } /* 32px */

/* Padding personalizado */
.pd_38_50 { padding: 0.38rem 0.50rem; } /* x:6px, y:8px */
.pd_50_63 { padding: 0.50rem 0.63rem; } /* x:8px, y:10px */
.pd_63_75 { padding: 0.63rem 0.75rem; } /* x:10px, y:12px */
.pd_75_100 { padding: 0.75rem 1rem; } /* x:12px, y:16px */

/* Padding por lado */
.pt_25 { padding-top: .25rem; }
.pt_50 { padding-top: .50rem; }
.pt_75 { padding-top: .75rem; }
.pt_100 { padding-top: 1rem; }
.pt_125 { padding-top: 1.25rem; }
.pt_150 { padding-top: 1.5rem; }
.pt_175 { padding-top: 1.75rem; }
.pt_200 { padding-top: 2rem; }

.pb_25 { padding-bottom: .25rem; }
.pb_50 { padding-bottom: .50rem; }
.pb_75 { padding-bottom: .75rem; }
.pb_100 { padding-bottom: 1rem; }
.pb_125 { padding-bottom: 1.25rem; }
.pb_150 { padding-bottom: 1.5rem; }
.pb_175 { padding-bottom: 1.75rem; }
.pb_200 { padding-bottom: 2rem; }

.pl_25 { padding-left: .25rem; }
.pl_50 { padding-left: .50rem; }
.pl_75 { padding-left: .75rem; }
.pl_100 { padding-left: 1rem; }
.pl_125 { padding-left: 1.25rem; }
.pl_150 { padding-left: 1.5rem; }
.pl_175 { padding-left: 1.75rem; }
.pl_200 { padding-left: 2rem; }

.pr_25 { padding-right: .25rem; }
.pr_50 { padding-right: .50rem; }
.pr_75 { padding-right: .75rem; }
.pr_100 { padding-right: 1rem; }
.pr_125 { padding-right: 1.25rem; }
.pr_150 { padding-right: 1.5rem; }
.pr_175 { padding-right: 1.75rem; }
.pr_200 { padding-right: 2rem; }

.px_25 { padding-left: .25rem; padding-right: .25rem; } /* 4px */
.px_50 { padding-left: .50rem; padding-right: .50rem; } /* 8px */
.px_75 { padding-left: .75rem; padding-right: .75rem; } /* 12px */
.px_100 { padding-left: 1rem; padding-right: 1rem; } /* 16px */
.px_125 { padding-left: 1.25rem; padding-right: 1.25rem; } /* 20px */
.px_150 { padding-left: 1.5rem; padding-right: 1.5rem; } /* 24px */
.px_175 { padding-left: 1.75rem; padding-right: 1.75rem; } /* 28px */
.px_200 { padding-left: 2rem; padding-right: 2rem; } /* 32px */

.py_25 { padding-top: .25rem; padding-bottom: .25rem; } /* 4px */
.py_50 { padding-top: .50rem; padding-bottom: .50rem; } /* 8px */
.py_75 { padding-top: .75rem; padding-bottom: .75rem; } /* 12px */
.py_100 { padding-top: 1rem; padding-bottom: 1rem; } /* 16px */
.py_125 { padding-top: 1.25rem; padding-bottom: 1.25rem; } /* 20px */
.py_150 { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* 24px */
.py_175 { padding-top: 1.75rem; padding-bottom: 1.75rem; } /* 28px */
.py_200 { padding-top: 2rem; padding-bottom: 2rem; } /* 32px */

.pltb_25 { padding-left: .25rem; padding-top: .25rem; padding-bottom: .25rem; } /* 4px */
.pltb_50 { padding-left: .50rem; padding-top: .50rem; padding-bottom: .50rem; } /* 8px */
.pltb_0625 { padding-left: .625rem; padding-top: .625rem; padding-bottom: .625rem; } /* 10px */
.pltb_75 { padding-left: .75rem; padding-top: .75rem; padding-bottom: .75rem; } /* 12px */
.pltb_100 { padding-left: 1rem; padding-top: 1rem; padding-bottom: 1rem; } /* 16px */
.pltb_125 { padding-left: 1.25rem; padding-top: 1.25rem; padding-bottom: 1.25rem; } /* 20px */
.pltb_150 { padding-left: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } /* 24px */
.pltb_175 { padding-left: 1.75rem; padding-top: 1.75rem; padding-bottom: 1.75rem; } /* 28px */
.pltb_200 { padding-left: 2rem; padding-top: 2rem; padding-bottom: 2rem; } /* 32px */

/* --------------------------------------
   SPACING — MARGIN (MISMA ESCALA REM): mg: margin
----------------------------------------- */

/* Margen por lado */
.mg_25 { margin: .25rem; } /* 4px */
.mg_50 { margin: .50rem; } /* 8px */
.mg_75 { margin: .75rem; } /* 12px */
.mg_100 { margin: 1rem; } /* 16px */
.mg_125 { margin: 1.25rem; } /* 20px */
.mg_150 { margin: 1.50rem; } /* 24px */
.mg_175 { margin: 1.75rem; } /* 28px */
.mg_200 { margin: 2rem; } /* 32px */

.mt_25 { margin-top: .25rem; } /* 4px */
.mt_50 { margin-top: .50rem; } /* 8px */
.mt_75 { margin-top: .75rem; } /* 12px */
.mt_100 { margin-top: 1rem; } /* 16px */

.mb_25 { margin-bottom: .25rem; } /* 4px */
.mb_50 { margin-bottom: .50rem; } /* 8px */
.mb_75 { margin-bottom: .75rem; } /* 12px */
.mb_100 { margin-bottom: 1rem; } /* 16px */
.mb_125 { margin-bottom: 1.25rem; } /* 20px */
.mb_150 { margin-bottom: 1.5rem; } /* 24px */
.mb_175 { margin-bottom: 1.75rem; } /* 28px */
.mb_200 { margin-bottom: 2rem; } /* 32px */

.ml_100 { margin-left: 1rem; } /* 16px */
.mr_100 { margin-right: 1rem; } /* 16px */

.mx_100 { margin-left: 1rem; margin-right: 1rem; } /* 16px */
.my_100 { margin-top: 1rem; margin-bottom: 1rem; } /* 16px */

/* --------------------------------------
   TRANSITIONS: tst: transition
----------------------------------------- */
.tst_all_25_e { transition: all .25s ease; }
.tst_all_50_e { transition: all .50s ease; }
.tst_all_75_e { transition: all .75s ease; }
.tst_all_100_e { transition: all 1s ease; }
.tst_all_150_e { transition: all 1.5s ease; }
.tst_all_200_e { transition: all 2s ease; }
.tst_all_250_e { transition: all 2.5s ease; }
.tst_all_300_e { transition: all 3s ease; }

.tst_all_25_e_i { transition: all .25s ease-in; }
.tst_all_50_e_i { transition: all .50s ease-in; }
.tst_all_75_e_i { transition: all .75s ease-in; }
.tst_all_100_e_i { transition: all 1s ease-in; }
.tst_all_150_e_i { transition: all 1.5s ease-in; }
.tst_all_200_e_i { transition: all 2s ease-in; }
.tst_all_250_e_i { transition: all 2.5s ease-in; }
.tst_all_300_e_i { transition: all 3s ease-in; }

.tst_all_25_e_io { transition: all .25s ease-in-out; }
.tst_all_50_e_io { transition: all .50s ease-in-out; }
.tst_all_75_e_io { transition: all .75s ease-in-out; }
.tst_all_100_e_io { transition: all 1s ease-in-out; }
.tst_all_150_e_io { transition: all 1.5s ease-in-out; }
.tst_all_200_e_io { transition: all 2s ease-in-out; }
.tst_all_250_e_io { transition: all 2.5s ease-in-out; }
.tst_all_300_e_io { transition: all 3s ease-in-out; }

.tst_all_25_e_o { transition: all .25s ease-out; }
.tst_all_50_e_o { transition: all .50s ease-out; }
.tst_all_75_e_o { transition: all .75s ease-out; }
.tst_all_100_e_o { transition: all 1s ease-out; }
.tst_all_150_e_o { transition: all 1.5s ease-out; }
.tst_all_200_e_o { transition: all 2s ease-out; }
.tst_all_250_e_o { transition: all 2.5s ease-out; }
.tst_all_300_e_o { transition: all 3s ease-out; }

.traslate_4 { transform: translateY(-10px); }

/* --------------------------------------
   FONTS: fs: font-size
----------------------------------------- */
.fs_25  { font-size: .25rem; } /* 4px */
.fs_0375 { font-size: .375rem; } /* 6px */
.fs_50  { font-size: .50rem; } /* 8px */
.fs_0625 { font-size: .625rem; } /* 10px */
.fs_0688 { font-size: var(--fs-0688); } /* 11px */
.fs_75  { font-size: .75rem; } /* 12px */
.fs_100 { font-size: 1rem; } /* 16px */
.fs_117 { font-size: 1.17rem; } /* 18.72px */
.fs_1125 { font-size: 1.125rem; } /* 18px */
.fs_125 { font-size: 1.25rem; } /* 20px */
.fs_150 { font-size: 1.5rem; } /* 24px */
.fs_175 { font-size: 1.75rem; } /* 28px */
.fs_200 { font-size: 2rem; } /* 32px */

.cl_tx_tt { color: var(--cl-txt-tt); }
.cl_tx_stt { color: var(--cl-txt-stt); }
.cl_tx_desc { color: var(--cl-txt-desc); }

.cl_txt_lbl { color: var(--cl-form-lbl); }

.cl_tx_ac { color: var(--cl-br-ac); }

/* --------------------------------------
   TEXT COLORS ADICIONALES: cl_tx: color text
----------------------------------------- */
/* Colores principales de estado */
.cl_tx_success { color: var(--cl-success); }
.cl_tx_error { color: var(--cl-error); }
.cl_tx_warning { color: var(--cl-warning); }
.cl_tx_info { color: var(--cl-info); }

/* Colores de texto oscuros (para títulos en fondos de color) */
.cl_tx_success_dk { color: var(--cl-success-text); }
.cl_tx_error_dk { color: var(--cl-error-text); }
.cl_tx_warning_dk { color: var(--cl-warning-text); }
.cl_tx_info_dk { color: var(--cl-info-text); }

/* Colores de texto claros (para descripciones en fondos de color) */
.cl_tx_success_lt { color: var(--cl-success-text-light); }
.cl_tx_error_lt { color: var(--cl-error-text-light); }
.cl_tx_warning_lt { color: var(--cl-warning-text-light); }
.cl_tx_info_lt { color: var(--cl-info-text-light); }

/* --------------------------------------
   FONT WEIGHT: fw: font-weight
----------------------------------------- */
.fw_400 { font-weight: 400; } /* Normal */
.fw_500 { font-weight: 500; } /* Medium */
.fw_600 { font-weight: 600; } /* Semibold */
.fw_700 { font-weight: 700; } /* Bold */
.fw_800 { font-weight: 800; } /* Extrabold */

/* --------------------------------------
   TEXT TRANSFORM: tt: text-transform
----------------------------------------- */
.tt_uppercase { text-transform: uppercase; }
.tt_lowercase { text-transform: lowercase; }
.tt_capitalize { text-transform: capitalize; }
.tt_none { text-transform: none; }

/* --------------------------------------
   LETTER SPACING: ls: letter-spacing
----------------------------------------- */
.ls_tight { letter-spacing: -0.025em; }
.ls_normal { letter-spacing: 0; }
.ls_wide { letter-spacing: 0.05em; }
.ls_wider { letter-spacing: 0.1em; }

.txt_c { text-align: center; }
.txt_l { text-align: left; }
.txt_r { text-align: right; }
.txt_j { text-align: justify; }



.btn-action {
   border: none; 
   padding: 0.5rem 1rem; 
   border-radius: var(--br-50); 
   cursor: pointer;
   transition: all .25s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   transition: all .25s ease;
}

.btn-action svg {
   margin-right: .5rem;
   stroke: var(--cl-w);
}

.btn-action .txt_action {
   color: var(--cl-w);
}

.btn-action:hover svg {
   stroke: var(--cl-w);
}

.btn-search {
   background: var(--accent-base);
}

.btn-search:hover {
   background: #4a36bd;
   color: var(--cl-w);
   box-shadow: 0px 0px 0px 3px var(--accent-focus);
}

.btn-close {
   background: var(--cl-close-bg);
   color: var(--cl-close);
   border:1px solid var(--cl-close-border);
}

.btn-close:hover {
   box-shadow:
      0 0 8px var(--cl-close-border),
      0 0 14px var(--cl-close-bg);
}

.modal .btn-action {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px;
   width: 44px;
   height: 44px;
}

.modal .btn-action .btn-close {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal .btn-action .btn-close svg {
   padding: 0;
   margin: 0;
   stroke: var(--cl-close); 
}

.btn-remove {
   background: var(--cl-accent-red-bg);
   color: var(--cl-accent-red);
   border:1px solid var(--cl-accent-red-border);
   transition: all .25s ease;
   border-radius: var(--br-50);
}

.modal #images-gallery-header .btn-action {
   width: auto;
   height: auto;
}

.modal #images-gallery-header .btn-action .btn-remove {
   padding: 8px;
}

.modal #images-gallery-header .btn-action .btn-remove svg {
   margin-right: .5rem;
   min-height: 16px;
   min-width: 16px;
   stroke: var(--cl-accent-red);
}

.modal #images-gallery-header .btn-action .btn-remove span {
   white-space: nowrap;
   color: var(--cl-accent-red);
}

.modal .btn-action .btn-remove {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal .btn-action .btn-remove svg {
   padding: 0;
   margin: 0;
   stroke: var(--cl-accent-red);
}

.btn-remove:hover {
   box-shadow:
      0 0 8px var(--cl-accent-red-border),
      0 0 14px var(--cl-accent-red-bg);
}

/* .btn-action:hover {
   transform: translateY(-2px);
   background: var(--cl-br-ac);
   color: var(--cl-w);
   box-shadow: 0px 0px 0px 3px rgba(17, 87, 238,0.3);
} */

/* --------------------------------------
   ANIMATIONS: Animaciones de entrada
----------------------------------------- */

/* Animación Balloon - Efecto globo con rebote */
.ani_balloon {
  cursor: pointer;
}

.ani_balloon:hover {
  animation: balloonExpand 0.3s ease-out forwards;
}

.ani_balloon:active {
  animation: balloonPress 0.3s ease-out forwards;
}

@keyframes balloonExpand {
  0% { transform: scale(1, 1); }
  40% { transform: scale(0.98, 1.02); }
  60% { transform: scale(0.99, 1.02); }
  80% { transform: scale(1, 1.01); }
  100% { transform: scale(1.01, 1); }
}

@keyframes balloonPress {
  0% { transform: scale(1, 1); }
  50% { transform: scale(1.01, 0.94); }
  70% { transform: scale(1.03, 1.03); }
  85% { transform: scale(0.98, 0.98); }
  100% { transform: scale(1, 1); }
}

/* Cascade Blur - Animación premium con desenfoque */
.ani_cascade_blur_s1 {
   animation: cascadeBlurContainer 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ani_cascade_blur_s1 > *:nth-child(1) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(2) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(3) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(4) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(5) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(6) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(7) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(8) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(9) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s backwards;
}

.ani_cascade_blur_s1 > *:nth-child(10) {
   animation: cascadeBlurChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s backwards;
}

/* Keyframes para el container */
@keyframes cascadeBlurContainer {
   from {
      opacity: 0;
      transform: scale(0.96);
   }
   to {
      opacity: 1;
      transform: scale(1);
   }
}

/* Keyframes para los hijos */
@keyframes cascadeBlurChild {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Variante rápida */
.ani_cascade_blur_fast {
   animation: cascadeBlurContainer 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ani_cascade_blur_fast > *:nth-child(1) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s backwards;
}

.ani_cascade_blur_fast > *:nth-child(2) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}

.ani_cascade_blur_fast > *:nth-child(3) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.ani_cascade_blur_fast > *:nth-child(4) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.ani_cascade_blur_fast > *:nth-child(5) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.ani_cascade_blur_fast > *:nth-child(6) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.ani_cascade_blur_fast > *:nth-child(7) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.ani_cascade_blur_fast > *:nth-child(8) {
   animation: cascadeBlurChild 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s backwards;
}

/* Variante lenta */
.ani_cascade_blur_slow {
   animation: cascadeBlurContainer 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ani_cascade_blur_slow > *:nth-child(1) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s backwards;
}

.ani_cascade_blur_slow > *:nth-child(2) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.ani_cascade_blur_slow > *:nth-child(3) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.ani_cascade_blur_slow > *:nth-child(4) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
}

.ani_cascade_blur_slow > *:nth-child(5) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
}

.ani_cascade_blur_slow > *:nth-child(6) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s backwards;
}

.ani_cascade_blur_slow > *:nth-child(7) {
   animation: cascadeBlurChild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s backwards;
}

/* Mobile nav links */