/* ===========================================================
   COLORWAY UTILITIES FRAMEWORK v1.0
   Compilado desde colorway-utilities.scss
   Autor: Mario Bravo (Colorway.cl)
   =========================================================== */

/* ===========================================================
	  🎨 RESET BÁSICO Y CONFIGURACIÓN GLOBAL
	  =========================================================== */
   :root {
	/* 🎯 Colores base */
	  --color-white: #fff;
	  --color-black: #000;
	  --color-light: #efefef;
	  --color-lighter: #f2f2f2;
	  --color-dark: #1f1f1f;
	  --color-darker: #444;
	  --color-gray: #5f5f5f;
	
	  /* 🌈 Colores principales */
	  --color-amarillo: #f2de01;   /* Amarillo vibrante */
	  --color-secondary: #f38121; /* Naranja cálido */
	  --color-tertiary: #981f78;  /* Púrpura intenso */
	  --color-accent: #f18200;    /* Naranja acento */
	  --color-highlight: #cf127f; /* Magenta fuerte */
	
	  /* 💖 Tonos rosados y violetas */
	  --color-pink: #ff4081;
	  --color-pink-strong: #e60073;
	  --color-pink-light: #f04f82;
	  --color-magenta: #f0f;
	  --color-purple: #982078;
	  --color-violet: #663399;
	
	  /* 🔥 Colores cálidos adicionales */
	  --color-orange: #ffa500;
	  --color-orange-light: #ff8a35;
	  --color-red: #ff4040;
	
	  /* 🌹 Colores especiales / branding */
	  --color-brand-dark: #5e003b; /* Burdeos profundo */
	  --color-gradient: linear-gradient(90.35deg, #FD977B 14.01%, #FE7CCD 91.6%);
   
	 --radius-sm: 4px;
	 --radius-md: 8px;
	 --radius-lg: 16px;
	 --radius-full: 9999px;
   
	 --transition-fast: 0.15s ease-in;
	 --transition-base: 0.3s ease;
	 --transition-slow: 0.6s ease;
   }

/* =====================
   GRID BASE
   ===================== */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-5{grid-template-columns:repeat(5,1fr)}
.grid-cols-6{grid-template-columns:repeat(6,1fr)}
.grid-cols-7{grid-template-columns:repeat(7,1fr)}
.grid-cols-8{grid-template-columns:repeat(8,1fr)}
.grid-cols-9{grid-template-columns:repeat(9,1fr)}
.grid-cols-10{grid-template-columns:repeat(10,1fr)}
.grid-cols-11{grid-template-columns:repeat(11,1fr)}
.grid-cols-12{grid-template-columns:repeat(12,1fr)}

/* =====================
   GAPS
   ===================== */
.gap-0{gap:0}
.gap-1{gap:1px}
.gap-2{gap:2px}
.gap-3{gap:3px}
.gap-4{gap:4px}
.gap-5{gap:5px}
.gap-6{gap:6px}
.gap-7{gap:7px}
.gap-8{gap:8px}
.gap-9{gap:9px}
.gap-10{gap:10px}
.gap-11{gap:11px}
.gap-12{gap:12px}
.gap-13{gap:13px}
.gap-14{gap:14px}
.gap-15{gap:15px}
.gap-16{gap:16px}
.gap-17{gap:17px}
.gap-18{gap:18px}
.gap-19{gap:19px}
.gap-20{gap:20px}

/* =====================
   DISPLAY
   ===================== */
.d-block{display:block}
.d-inline{display:inline}
.d-inline-block{display:inline-block}
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.d-grid{display:grid}
.d-none{display:none}

/* =====================
   FLEX / ALIGN / JUSTIFY
   ===================== */
.flex-row{flex-direction:row}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.justify-start{justify-content:flex-start}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.align-start{align-items:flex-start}
.align-center{align-items:center}
.align-end{align-items:flex-end}
.align-stretch{align-items:stretch}

/* ========================================================= */
/* 📌 POSICIONAMIENTO Y OVERFLOW */
/* ========================================================= */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fixed { position: fixed; }
.pos-sticky { position: sticky; }

/* Atajo para top:0; right:0; bottom:0; left:0; */
.pos-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Overflow */
.overflow-h { overflow: hidden; }
.overflow-a { overflow: auto; }
.overflow-x-h { overflow-x: hidden; }
.overflow-y-s { overflow-y: scroll; }


/* =====================
   SPACING
   ===================== */
/* ===== MARGIN GENERAL ===== */
   .m-0 { margin: 0px; }
   .m-auto { margin: auto; }
   .mx-auto { margin-left: auto; margin-right: auto; }
   
   .m-1 { margin: 1px; }
   .m-2 { margin: 2px; }
   .m-3 { margin: 3px; }
   .m-4 { margin: 4px; }
   .m-5 { margin: 5px; }
   .m-6 { margin: 6px; }
   .m-7 { margin: 7px; }
   .m-8 { margin: 8px; }
   .m-9 { margin: 9px; }
   .m-10 { margin: 10px; }
   .m-15 { margin: 15px; }
   .m-20 { margin: 20px; }
   .m-25 { margin: 25px; }
   .m-30 { margin: 30px; }
   .m-35 { margin: 35px; }
   .m-40 { margin: 40px; }
   
   /* ===== MARGIN POR EJE ===== */
   .mx-0 { margin-left: 0; margin-right: 0; }
   .my-0 { margin-top: 0; margin-bottom: 0; }
   
   .mx-1 { margin-left: 1px; margin-right: 1px; }
   .mx-2 { margin-left: 2px; margin-right: 2px; }
   .mx-3 { margin-left: 3px; margin-right: 3px; }
   .mx-4 { margin-left: 4px; margin-right: 4px; }
   .mx-5 { margin-left: 5px; margin-right: 5px; }
   .mx-6 { margin-left: 6px; margin-right: 6px; }
   .mx-7 { margin-left: 7px; margin-right: 7px; }
   .mx-8 { margin-left: 8px; margin-right: 8px; }
   .mx-9 { margin-left: 9px; margin-right: 9px; }
   .mx-10 { margin-left: 10px; margin-right: 10px; }
   .mx-15 { margin-left: 15px; margin-right: 15px; }
   .mx-20 { margin-left: 20px; margin-right: 20px; }
   .mx-25 { margin-left: 25px; margin-right: 25px; }
   .mx-30 { margin-left: 30px; margin-right: 30px; }
   .mx-35 { margin-left: 35px; margin-right: 35px; }
   .mx-40 { margin-left: 40px; margin-right: 40px; }
   
   .my-1 { margin-top: 1px; margin-bottom: 1px; }
   .my-2 { margin-top: 2px; margin-bottom: 2px; }
   .my-3 { margin-top: 3px; margin-bottom: 3px; }
   .my-4 { margin-top: 4px; margin-bottom: 4px; }
   .my-5 { margin-top: 5px; margin-bottom: 5px; }
   .my-6 { margin-top: 6px; margin-bottom: 6px; }
   .my-7 { margin-top: 7px; margin-bottom: 7px; }
   .my-8 { margin-top: 8px; margin-bottom: 8px; }
   .my-9 { margin-top: 9px; margin-bottom: 9px; }
   .my-10 { margin-top: 10px; margin-bottom: 10px; }
   .my-15 { margin-top: 15px; margin-bottom: 15px; }
   .my-20 { margin-top: 20px; margin-bottom: 20px; }
   .my-25 { margin-top: 25px; margin-bottom: 25px; }
   .my-30 { margin-top: 30px; margin-bottom: 30px; }
   .my-35 { margin-top: 35px; margin-bottom: 35px; }
   .my-40 { margin-top: 40px; margin-bottom: 40px; }
   
   /* ===== MARGIN INDIVIDUAL ===== */
   .mt-0 { margin-top: 0px; }
   .mb-0 { margin-bottom: 0px; }
   .ml-0 { margin-left: 0px; }
   .mr-0 { margin-right: 0px; }
   
   .mt-1 { margin-top: 1px; }
   .mt-2 { margin-top: 2px; }
   .mt-3 { margin-top: 3px; }
   .mt-4 { margin-top: 4px; }
   .mt-5 { margin-top: 5px; }
   .mt-6 { margin-top: 6px; }
   .mt-7 { margin-top: 7px; }
   .mt-8 { margin-top: 8px; }
   .mt-9 { margin-top: 9px; }
   .mt-10 { margin-top: 10px; }
   .mt-15 { margin-top: 15px; }
   .mt-20 { margin-top: 20px; }
   .mt-25 { margin-top: 25px; }
   .mt-30 { margin-top: 30px; }
   .mt-35 { margin-top: 35px; }
   .mt-40 { margin-top: 40px; }
   
   .mb-1 { margin-bottom: 1px; }
   .mb-2 { margin-bottom: 2px; }
   .mb-3 { margin-bottom: 3px; }
   .mb-4 { margin-bottom: 4px; }
   .mb-5 { margin-bottom: 5px; }
   .mb-6 { margin-bottom: 6px; }
   .mb-7 { margin-bottom: 7px; }
   .mb-8 { margin-bottom: 8px; }
   .mb-9 { margin-bottom: 9px; }
   .mb-10 { margin-bottom: 10px; }
   .mb-15 { margin-bottom: 15px; }
   .mb-20 { margin-bottom: 20px; }
   .mb-25 { margin-bottom: 25px; }
   .mb-30 { margin-bottom: 30px; }
   .mb-35 { margin-bottom: 35px; }
   .mb-40 { margin-bottom: 40px; }
   
   .ml-1 { margin-left: 1px; }
   .ml-2 { margin-left: 2px; }
   .ml-3 { margin-left: 3px; }
   .ml-4 { margin-left: 4px; }
   .ml-5 { margin-left: 5px; }
   .ml-6 { margin-left: 6px; }
   .ml-7 { margin-left: 7px; }
   .ml-8 { margin-left: 8px; }
   .ml-9 { margin-left: 9px; }
   .ml-10 { margin-left: 10px; }
   .ml-15 { margin-left: 15px; }
   .ml-20 { margin-left: 20px; }
   .ml-25 { margin-left: 25px; }
   .ml-30 { margin-left: 30px; }
   .ml-35 { margin-left: 35px; }
   .ml-40 { margin-left: 40px; }
   
   .mr-1 { margin-right: 1px; }
   .mr-2 { margin-right: 2px; }
   .mr-3 { margin-right: 3px; }
   .mr-4 { margin-right: 4px; }
   .mr-5 { margin-right: 5px; }
   .mr-6 { margin-right: 6px; }
   .mr-7 { margin-right: 7px; }
   .mr-8 { margin-right: 8px; }
   .mr-9 { margin-right: 9px; }
   .mr-10 { margin-right: 10px; }
   .mr-15 { margin-right: 15px; }
   .mr-20 { margin-right: 20px; }
   .mr-25 { margin-right: 25px; }
   .mr-30 { margin-right: 30px; }
   .mr-35 { margin-right: 35px; }
   .mr-40 { margin-right: 40px; }
   
   /* =====================
	  PADDING
	  ===================== */
   
   /* ===== PADDING GENERAL ===== */
   .p-0 { padding: 0px; }
   .p-1 { padding: 1px; }
   .p-2 { padding: 2px; }
   .p-3 { padding: 3px; }
   .p-4 { padding: 4px; }
   .p-5 { padding: 5px; }
   .p-6 { padding: 6px; }
   .p-7 { padding: 7px; }
   .p-8 { padding: 8px; }
   .p-9 { padding: 9px; }
   .p-10 { padding: 10px; }
   .p-15 { padding: 15px; }
   .p-20 { padding: 20px; }
   .p-25 { padding: 25px; }
   .p-30 { padding: 30px; }
   .p-35 { padding: 35px; }
   .p-40 { padding: 40px; }
   
   /* ===== PADDING POR EJE ===== */
   .px-0 { padding-left: 0; padding-right: 0; }
   .py-0 { padding-top: 0; padding-bottom: 0; }
   
   .px-1 { padding-left: 1px; padding-right: 1px; }
   .px-2 { padding-left: 2px; padding-right: 2px; }
   .px-3 { padding-left: 3px; padding-right: 3px; }
   .px-4 { padding-left: 4px; padding-right: 4px; }
   .px-5 { padding-left: 5px; padding-right: 5px; }
   .px-6 { padding-left: 6px; padding-right: 6px; }
   .px-7 { padding-left: 7px; padding-right: 7px; }
   .px-8 { padding-left: 8px; padding-right: 8px; }
   .px-9 { padding-left: 9px; padding-right: 9px; }
   .px-10 { padding-left: 10px; padding-right: 10px; }
   .px-15 { padding-left: 15px; padding-right: 15px; }
   .px-20 { padding-left: 20px; padding-right: 20px; }
   .px-25 { padding-left: 25px; padding-right: 25px; }
   .px-30 { padding-left: 30px; padding-right: 30px; }
   .px-35 { padding-left: 35px; padding-right: 35px; }
   .px-40 { padding-left: 40px; padding-right: 40px; }
   
   .py-1 { padding-top: 1px; padding-bottom: 1px; }
   .py-2 { padding-top: 2px; padding-bottom: 2px; }
   .py-3 { padding-top: 3px; padding-bottom: 3px; }
   .py-4 { padding-top: 4px; padding-bottom: 4px; }
   .py-5 { padding-top: 5px; padding-bottom: 5px; }
   .py-6 { padding-top: 6px; padding-bottom: 6px; }
   .py-7 { padding-top: 7px; padding-bottom: 7px; }
   .py-8 { padding-top: 8px; padding-bottom: 8px; }
   .py-9 { padding-top: 9px; padding-bottom: 9px; }
   .py-10 { padding-top: 10px; padding-bottom: 10px; }
   .py-15 { padding-top: 15px; padding-bottom: 15px; }
   .py-20 { padding-top: 20px; padding-bottom: 20px; }
   .py-25 { padding-top: 25px; padding-bottom: 25px; }
   .py-30 { padding-top: 30px; padding-bottom: 30px; }
   .py-35 { padding-top: 35px; padding-bottom: 35px; }
   .py-40 { padding-top: 40px; padding-bottom: 40px; }
   
   /* ===== PADDING INDIVIDUAL ===== */
   .pt-0 { padding-top: 0px; }
   .pb-0 { padding-bottom: 0px; }
   .pl-0 { padding-left: 0px; }
   .pr-0 { padding-right: 0px; }
   
   .pt-1 { padding-top: 1px; }
   .pt-2 { padding-top: 2px; }
   .pt-3 { padding-top: 3px; }
   .pt-4 { padding-top: 4px; }
   .pt-5 { padding-top: 5px; }
   .pt-6 { padding-top: 6px; }
   .pt-7 { padding-top: 7px; }
   .pt-8 { padding-top: 8px; }
   .pt-9 { padding-top: 9px; }
   .pt-10 { padding-top: 10px; }
   .pt-15 { padding-top: 15px; }
   .pt-20 { padding-top: 20px; }
   .pt-25 { padding-top: 25px; }
   .pt-30 { padding-top: 30px; }
   .pt-35 { padding-top: 35px; }
   .pt-40 { padding-top: 40px; }
   
   .pb-1 { padding-bottom: 1px; }
   .pb-2 { padding-bottom: 2px; }
   .pb-3 { padding-bottom: 3px; }
   .pb-4 { padding-bottom: 4px; }
   .pb-5 { padding-bottom: 5px; }
   .pb-6 { padding-bottom: 6px; }
   .pb-7 { padding-bottom: 7px; }
   .pb-8 { padding-bottom: 8px; }
   .pb-9 { padding-bottom: 9px; }
   .pb-10 { padding-bottom: 10px; }
   .pb-15 { padding-bottom: 15px; }
   .pb-20 { padding-bottom: 20px; }
   .pb-25 { padding-bottom: 25px; }
   .pb-30 { padding-bottom: 30px; }
   .pb-35 { padding-bottom: 35px; }
   .pb-40 { padding-bottom: 40px; }
   
   .pl-1 { padding-left: 1px; }
   .pl-2 { padding-left: 2px; }
   .pl-3 { padding-left: 3px; }
   .pl-4 { padding-left: 4px; }
   .pl-5 { padding-left: 5px; }
   .pl-6 { padding-left: 6px; }
   .pl-7 { padding-left: 7px; }
   .pl-8 { padding-left: 8px; }
   .pl-9 { padding-left: 9px; }
   .pl-10 { padding-left: 10px; }
   .pl-15 { padding-left: 15px; }
   .pl-20 { padding-left: 20px; }
   .pl-25 { padding-left: 25px; }
   .pl-30 { padding-left: 30px; }
   .pl-35 { padding-left: 35px; }
   .pl-40 { padding-left: 40px; }
   
   .pr-1 { padding-right: 1px; }
   .pr-2 { padding-right: 2px; }
   .pr-3 { padding-right: 3px; }
   .pr-4 { padding-right: 4px; }
   .pr-5 { padding-right: 5px; }
   .pr-6 { padding-right: 6px; }
   .pr-7 { padding-right: 7px; }
   .pr-8 { padding-right: 8px; }
   .pr-9 { padding-right: 9px; }
   .pr-10 { padding-right: 10px; }
   .pr-15 { padding-right: 15px; }
   .pr-20 { padding-right: 20px; }
   .pr-25 { padding-right: 25px; }
   .pr-30 { padding-right: 30px; }
   .pr-35 { padding-right: 35px; }
   .pr-40 { padding-right: 40px; }

/* =====================
   COLORS
   ===================== */

.bg-black {background: var(--color-black);}
.text-white {color: var(--color-white);}
.text-amarillo {color: var(--color-amarillo);}


/* =====================
   TEXT ALIGN
   ===================== */
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}

/* =====================
   WIDTH / HEIGHT
   ===================== */
.w-100{width:100%}
.h-100{height:100%}
.min-h-100vh{min-height:100vh}

/* =====================
   BORDER / RADIUS
   ===================== */
.rounded-0{border-radius: 0px}
.rounded-1{border-radius: 1px}
.rounded-2{border-radius: 2px}
.rounded-3{border-radius: 3px}
.rounded-4{border-radius: 4px}
.rounded-5{border-radius: 5px}
.rounded-10{border-radius: 10px}
.rounded-15{border-radius: 15px}
.rounded-20{border-radius: 20px}
.rounded-full{border-radius:9999px}

/* =====================
   TRANSITIONS / HOVERS
   ===================== */
.transition{transition:all .3s ease}
.transition-base {transition: var(--transition-base);}
.hover-opacity:hover{opacity:.8}
.hover-scale:hover{transform:scale(1.05)}
.hover-shadow:hover{box-shadow:0 8px 20px rgba(0,0,0,.15)}

/* =====================
   RESPONSIVE SYSTEM
   ===================== */

/* 2XL (≤1920px) */
@media (max-width:1920px){
  .\32 xl\:grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .\32 xl\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .\32 xl\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}

/* XL (≤1536px) */
@media (max-width:1536px){
  .xl\:grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .xl\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .xl\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .xl\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .xl\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
}

/* Large (≤1280px) */
@media (max-width:1280px){
  .lg\:grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
}

/* Medium (≤999px) */
@media (max-width:999px){
  .md\:grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .md\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
  .md\:d-block{display:block}
  .md\:d-flex{display:flex}
  .md\:d-grid{display:grid}
  .md\:d-none{display:none}
  .md\:flex-col{flex-direction:column}
  .md\:justify-center{justify-content:center}
  .md\:align-center{align-items:center}
  .md\:text-center{text-align:center}
  .md\:gap-0{gap:0}
  .md\:gap-1{gap:1px}
  .md\:gap-2{gap:2px}
  .md\:gap-3{gap:3px}
  .md\:gap-4{gap:4px}
  .md\:gap-5{gap:5px}
  .md\:gap-6{gap:6px}
  .md\:gap-7{gap:7px}
  .md\:gap-8{gap:8px}
  .md\:gap-9{gap:9px}
  .md\:gap-10{gap:10px}
  .md\:gap-11{gap:11px}
  .md\:gap-12{gap:12px}
  .md\:gap-13{gap:13px}
  .md\:gap-14{gap:14px}
  .md\:gap-15{gap:15px}
  .md\:gap-16{gap:16px}
  .md\:gap-17{gap:17px}
  .md\:gap-18{gap:18px}
  .md\:gap-19{gap:19px}
  .md\:gap-20{gap:20px}
}

/* Small (≤500px) */
@media (max-width:500px){
  .sm\:grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .sm\:d-block{display:block}
  .sm\:d-flex{display:flex}
  .sm\:d-grid{display:grid}
  .sm\:d-none{display:none}
  .sm\:flex-col{flex-direction:column}
  .sm\:justify-center{justify-content:center}
  .sm\:align-center{align-items:center}
  .sm\:text-center{text-align:center}
  .sm\:text-left{text-align:left}
  .sm\:text-right{text-align:right}
  .sm\:gap-0{gap:0}
  .sm\:gap-1{gap:1px}
  .sm\:gap-2{gap:2px}
  .sm\:gap-3{gap:3px}
  .sm\:gap-4{gap:4px}
  .sm\:gap-5{gap:5px}
  .sm\:gap-6{gap:6px}
  .sm\:gap-7{gap:7px}
  .sm\:gap-8{gap:8px}
  .sm\:gap-9{gap:9px}
  .sm\:gap-10{gap:10px}
  .sm\:gap-11{gap:11px}
  .sm\:gap-12{gap:12px}
  .sm\:gap-13{gap:13px}
  .sm\:gap-14{gap:14px}
  .sm\:gap-15{gap:15px}
  .sm\:gap-16{gap:16px}
  .sm\:gap-17{gap:17px}
  .sm\:gap-18{gap:18px}
  .sm\:gap-19{gap:19px}
  .sm\:gap-20{gap:20px}
}