/*
 * ============================================================
 *  tw.css — Reemplazo local de Tailwind CSS para Verde Web
 *  Cubre todas las clases utilitarias usadas en el proyecto
 *  Sin dependencias externas
 * ============================================================
 */

/* ========================
   RESET & BASE
   ======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
body { line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr[title] { text-decoration: underline dotted; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; } sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dl, dd, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
/* SVG de íconos NO deben tener height:auto — los mantiene en sus dimensiones definidas */
svg { display: block; }
svg[aria-hidden], svg[data-icon], svg[stroke] { flex-shrink: 0; }


/* ========================
   CSS CUSTOM PROPERTIES
   ======================== */
:root {
  /* Colores base */
  --color-black: #000000;
  --color-white: #ffffff;
  /* Grays */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  /* Greens */
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  /* Emerald */
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  /* Blue */
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-900: #1e3a8a;
  /* Indigo */
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  /* Purple */
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-900: #581c87;
  /* Yellow */
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  /* Teal */
  --color-teal-500: #14b8a6;
}

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

/* ========================
   POSITION
   ======================== */
.static   { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* ========================
   INSET / PLACEMENT
   ======================== */
.inset-0      { top: 0; right: 0; bottom: 0; left: 0; }
.inset-4      { top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; }
.top-0        { top: 0; }
.top-1\/2     { top: 50%; }
.top-4        { top: 1rem; }
.top-10       { top: 2.5rem; }
.right-0      { right: 0; }
.right-2      { right: 0.5rem; }
.right-4      { right: 1rem; }
.right-20     { right: 5rem; }
.bottom-0     { bottom: 0; }
.bottom-10    { bottom: 2.5rem; }
.bottom-20    { bottom: 5rem; }
.left-0       { left: 0; }
.left-4       { left: 1rem; }
.left-10      { left: 2.5rem; }
.left-1\/2    { left: 50%; }
.-left-2      { left: -0.5rem; }
.-z-10        { z-index: -10; }
.-z-20        { z-index: -20; }

/* ========================
   Z-INDEX
   ======================== */
.z-0   { z-index: 0; }
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-30  { z-index: 30; }
.z-50  { z-index: 50; }

/* ========================
   FLEX
   ======================== */
.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }
.flex-shrink-0    { flex-shrink: 0; }
.flex-1           { flex: 1 1 0%; }
.items-start      { align-items: flex-start; }
.items-center     { align-items: center; }
.items-end        { align-items: flex-end; }
.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.self-start       { align-self: flex-start; }
.self-center      { align-self: center; }
.self-end         { align-self: flex-end; }

/* ========================
   GRID
   ======================== */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }

/* ========================
   GAP
   ======================== */
.gap-1   { gap: 0.25rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }
.gap-16  { gap: 4rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-4 { row-gap: 1rem; }

/* ========================
   SPACING — PADDING
   ======================== */
.p-1    { padding: 0.25rem; }
.p-2    { padding: 0.5rem; }
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.p-6    { padding: 1.5rem; }
.p-7    { padding: 1.75rem; }
.p-8    { padding: 2rem; }
.p-10   { padding: 2.5rem; }
.p-12   { padding: 3rem; }
.p-16   { padding: 4rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8   { padding-left: 2rem; padding-right: 2rem; }
.px-10  { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12  { padding-top: 3rem; padding-bottom: 3rem; }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; }
.py-20  { padding-top: 5rem; padding-bottom: 5rem; }
.py-24  { padding-top: 6rem; padding-bottom: 6rem; }
.py-32  { padding-top: 8rem; padding-bottom: 8rem; }
.pt-4   { padding-top: 1rem; }
.pt-6   { padding-top: 1.5rem; }
.pt-8   { padding-top: 2rem; }
.pb-4   { padding-bottom: 1rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-8   { padding-bottom: 2rem; }
.pl-4   { padding-left: 1rem; }
.pr-4   { padding-right: 1rem; }

/* ========================
   SPACING — MARGIN
   ======================== */
.m-0     { margin: 0; }
.m-auto  { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0    { margin-top: 0; margin-bottom: 0; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-16   { margin-bottom: 4rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-4    { margin-top: 1rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-12   { margin-top: 3rem; }
.mt-16   { margin-top: 4rem; }
.mt-20   { margin-top: 5rem; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-2    { margin-left: 0.5rem; }
.ml-3    { margin-left: 0.75rem; }
.ml-4    { margin-left: 1rem; }
.-translate-x-1\/2 { transform: translateX(-50%); }

/* ========================
   WIDTH & HEIGHT
   ======================== */
.w-4    { width: 1rem; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-7    { width: 1.75rem; }
.w-8    { width: 2rem; }
.w-10   { width: 2.5rem; }
.w-12   { width: 3rem; }
.w-16   { width: 4rem; }
.w-20   { width: 5rem; }
.w-24   { width: 6rem; }
.w-32   { width: 8rem; }
.w-40   { width: 10rem; }
.w-48   { width: 12rem; }
.w-64   { width: 16rem; }
.w-80   { width: 20rem; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-1\/2  { width: 50%; }
.w-1\/3  { width: 33.333333%; }
.w-2\/3  { width: 66.666667%; }
.w-1\/4  { width: 25%; }
.w-3\/4  { width: 75%; }
.w-3     { width: 0.75rem; }
.w-auto  { width: auto; }
/* Tamaños especiales usados con corchetes → equivalentes */
.w-\[85vw\]  { width: 85vw; }
.w-\[80vw\]  { width: 80vw; }
.w-\[220px\] { width: 220px; }
.w-\[300px\] { width: 300px; }
.w-\[180px\] { width: 180px; }
.w-\[150px\] { width: 150px; }
.w-\[200px\] { width: 200px; }

.h-4    { height: 1rem; }
.h-5    { height: 1.25rem; }
.h-6    { height: 1.5rem; }
.h-7    { height: 1.75rem; }
.h-8    { height: 2rem; }
.h-10   { height: 2.5rem; }
.h-12   { height: 3rem; }
.h-16   { height: 4rem; }
.h-20   { height: 5rem; }
.h-24   { height: 6rem; }
.h-32   { height: 8rem; }
.h-40   { height: 10rem; }
.h-48   { height: 12rem; }
.h-64   { height: 16rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-px   { height: 1px; }
.h-3    { height: 0.75rem; }
.h-auto { height: auto; }
/* Tamaños especiales con corchetes */
.h-\[60vh\]  { height: 60vh; }
.h-\[80vh\]  { height: 80vh; }
.h-\[50vh\]  { height: 50vh; }
.h-\[60vh\]  { height: 60vh; }
.h-\[250px\] { height: 250px; }
.h-\[400px\] { height: 400px; }
.h-\[220px\] { height: 220px; }
.h-\[300px\] { height: 300px; }
.h-\[180px\] { height: 180px; }
.h-\[150px\] { height: 150px; }
.h-\[200px\] { height: 200px; }
.h-\[32px\]  { height: 32px; }
.h-\[48px\]  { height: 48px; }

.min-h-screen  { min-height: 100vh; }
.min-h-\[80vh\]{ min-height: 80vh; }
.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; margin-left: auto; margin-right: auto; }
.max-w-full { max-width: 100%; }

/* ========================
   TYPOGRAPHY
   ======================== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-7xl  { font-size: 4.5rem;   line-height: 1; }
.text-8xl  { font-size: 6rem;     line-height: 1; }
.text-9xl  { font-size: 8rem;     line-height: 1; }
/* Tamaños con corchetes */
.text-\[6px\]  { font-size: 6px; }
.text-\[10px\] { font-size: 10px; }
.text-\[10px\] { font-size: 10px; }

.font-thin       { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }

.font-poppins    { font-family: 'Poppins', sans-serif; }
.font-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.font-sans       { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }

.leading-none     { line-height: 1; }
.leading-tight    { line-height: 1.25; }
.leading-snug     { line-height: 1.375; }
.leading-normal   { line-height: 1.5; }
.leading-relaxed  { line-height: 1.625; }
.leading-loose    { line-height: 2; }
.leading-\[6px\]  { line-height: 6px; }
.leading-\[10px\] { line-height: 10px; }

.tracking-tight    { letter-spacing: -0.05em; }
.tracking-normal   { letter-spacing: 0em; }
.tracking-wide     { letter-spacing: 0.025em; }
.tracking-wider    { letter-spacing: 0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }
.tracking-\[0\.3em\]  { letter-spacing: 0.3em; }
.tracking-\[0\.4em\]  { letter-spacing: 0.4em; }
.tracking-tighter  { letter-spacing: -0.05em; }

.uppercase    { text-transform: uppercase; }
.lowercase    { text-transform: lowercase; }
.capitalize   { text-transform: capitalize; }
.normal-case  { text-transform: none; }
.italic       { font-style: italic; }
.not-italic   { font-style: normal; }

.whitespace-pre     { white-space: pre; }
.whitespace-nowrap  { white-space: nowrap; }
.whitespace-pre-wrap{ white-space: pre-wrap; }

.select-none  { user-select: none; }
.break-all    { word-break: break-all; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================
   COLORS — TEXT
   ======================== */
.text-white       { color: #ffffff; }
.text-black       { color: #000000; }
.text-transparent { color: transparent; }
.text-gray-100    { color: #f3f4f6; }
.text-gray-200    { color: #e5e7eb; }
.text-gray-300    { color: #d1d5db; }
.text-gray-400    { color: #9ca3af; }
.text-gray-500    { color: #6b7280; }
.text-gray-600    { color: #4b5563; }
.text-gray-700    { color: #374151; }
.text-gray-800    { color: #1f2937; }
.text-gray-900    { color: #111827; }
.text-green-300   { color: #86efac; }
.text-green-400   { color: #4ade80; }
.text-green-500   { color: #22c55e; }
.text-green-600   { color: #16a34a; }
.text-blue-300    { color: #93c5fd; }
.text-blue-400    { color: #60a5fa; }
.text-blue-500    { color: #3b82f6; }
.text-blue-600    { color: #2563eb; }
.text-indigo-400  { color: #818cf8; }
.text-purple-400  { color: #c084fc; }
.text-purple-500  { color: #a855f7; }
.text-yellow-400  { color: #facc15; }
.text-yellow-500  { color: #eab308; }
.text-emerald-400 { color: #34d399; }
.text-emerald-500 { color: #10b981; }
.text-teal-500    { color: #14b8a6; }
/* Opacidad con slash */
.text-white\/90   { color: rgba(255,255,255,0.9); }
.text-white\/70   { color: rgba(255,255,255,0.7); }
.text-white\/50   { color: rgba(255,255,255,0.5); }
.text-black\/70   { color: rgba(0,0,0,0.7); }

/* ========================
   COLORS — BACKGROUND
   ======================== */
.bg-black          { background-color: #000000; }
.bg-white          { background-color: #ffffff; }
.bg-transparent    { background-color: transparent; }
.bg-gray-50        { background-color: #f9fafb; }
.bg-gray-100       { background-color: #f3f4f6; }
.bg-gray-200       { background-color: #e5e7eb; }
.bg-gray-700       { background-color: #374151; }
.bg-gray-800       { background-color: #1f2937; }
.bg-gray-900       { background-color: #111827; }
.bg-green-500      { background-color: #22c55e; }
.bg-green-600      { background-color: #16a34a; }
.bg-green-700      { background-color: #15803d; }
.bg-blue-500       { background-color: #3b82f6; }
.bg-blue-600       { background-color: #2563eb; }
.bg-blue-700       { background-color: #1d4ed8; }
/* Con opacidad */
.bg-black\/50      { background-color: rgba(0,0,0,0.5); }
.bg-black\/60      { background-color: rgba(0,0,0,0.6); }
.bg-black\/70      { background-color: rgba(0,0,0,0.7); }
.bg-black\/80      { background-color: rgba(0,0,0,0.8); }
.bg-white\/10      { background-color: rgba(255,255,255,0.1); }
.bg-white\/20      { background-color: rgba(255,255,255,0.2); }
.bg-white\/30      { background-color: rgba(255,255,255,0.3); }
.bg-gray-800\/50   { background-color: rgba(31,41,55,0.5); }
.bg-gray-800\/80   { background-color: rgba(31,41,55,0.8); }
.bg-gray-800\/85   { background-color: rgba(31,41,55,0.85); }
.bg-gray-900\/20   { background-color: rgba(17,24,39,0.2); }
.bg-gray-900\/30   { background-color: rgba(17,24,39,0.3); }
.bg-gray-900\/40   { background-color: rgba(17,24,39,0.4); }
.bg-gray-900\/50   { background-color: rgba(17,24,39,0.5); }
.bg-gray-700\/50   { background-color: rgba(55,65,81,0.5); }
.bg-green-500\/5   { background-color: rgba(34,197,94,0.05); }
.bg-green-500\/10  { background-color: rgba(34,197,94,0.1); }
.bg-green-500\/20  { background-color: rgba(34,197,94,0.2); }
.bg-green-900\/20  { background-color: rgba(20,83,45,0.2); }
.bg-green-900\/40  { background-color: rgba(20,83,45,0.4); }
.bg-blue-500\/10   { background-color: rgba(59,130,246,0.1); }
.bg-blue-500\/20   { background-color: rgba(59,130,246,0.2); }
.bg-blue-900\/20   { background-color: rgba(30,58,138,0.2); }
.bg-blue-900\/40   { background-color: rgba(30,58,138,0.4); }
.bg-purple-900\/20 { background-color: rgba(88,28,135,0.2); }
.bg-purple-900\/40 { background-color: rgba(88,28,135,0.4); }

/* ========================
   BACKGROUND UTILITIES
   ======================== */
.bg-clip-text     { -webkit-background-clip: text; background-clip: text; }

/* Gradientes */
.bg-gradient-to-r     { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-l     { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.bg-gradient-to-t     { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.bg-gradient-to-b     { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-br    { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-tr    { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }
.bg-gradient-to-tl    { background-image: linear-gradient(to top left, var(--tw-gradient-stops)); }

/* Gradient stops — from */
.from-transparent     { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-black           { --tw-gradient-from: #000; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-white           { --tw-gradient-from: #fff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-gray-900        { --tw-gradient-from: #111827; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-gray-800        { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-green-400       { --tw-gradient-from: #4ade80; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-green-500       { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-blue-400        { --tw-gradient-from: #60a5fa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-blue-500        { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-indigo-600      { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-emerald-400     { --tw-gradient-from: #34d399; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-emerald-500     { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-purple-400      { --tw-gradient-from: #c084fc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-purple-500      { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-yellow-400      { --tw-gradient-from: #facc15; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* via */
.via-black            { --tw-gradient-stops: var(--tw-gradient-from), #000, var(--tw-gradient-to, transparent); }
.via-transparent      { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); }
.via-green-400        { --tw-gradient-stops: var(--tw-gradient-from), #4ade80, var(--tw-gradient-to, transparent); }
.via-black\/40        { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, transparent); }
.via-black\/60        { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.6), var(--tw-gradient-to, transparent); }
.via-black\/50        { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, transparent); }

/* to */
.to-transparent       { --tw-gradient-to: transparent; }
.to-black             { --tw-gradient-to: #000; }
.to-white             { --tw-gradient-to: #fff; }
.to-gray-900          { --tw-gradient-to: #111827; }
.to-green-500         { --tw-gradient-to: #22c55e; }
.to-green-600         { --tw-gradient-to: #16a34a; }
.to-blue-400          { --tw-gradient-to: #60a5fa; }
.to-blue-600          { --tw-gradient-to: #2563eb; }
.to-indigo-600        { --tw-gradient-to: #4f46e5; }
.to-emerald-400       { --tw-gradient-to: #34d399; }
.to-emerald-500       { --tw-gradient-to: #10b981; }
.to-emerald-600       { --tw-gradient-to: #059669; }
.to-teal-500          { --tw-gradient-to: #14b8a6; }
.to-purple-500        { --tw-gradient-to: #a855f7; }
.to-purple-600        { --tw-gradient-to: #9333ea; }
.to-yellow-500        { --tw-gradient-to: #eab308; }

/* ========================
   BORDERS
   ======================== */
.border         { border-width: 1px; border-style: solid; }
.border-0       { border-width: 0; }
.border-2       { border-width: 2px; border-style: solid; }
.border-t       { border-top-width: 1px; border-top-style: solid; }
.border-b       { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l       { border-left-width: 1px; border-left-style: solid; }
.border-r       { border-right-width: 1px; border-right-style: solid; }
.border-y       { border-top-width: 1px; border-bottom-width: 1px; border-style: solid; }
.border-dashed  { border-style: dashed; }
.border-none    { border-style: none; }

.border-white        { border-color: #ffffff; }
.border-black        { border-color: #000000; }
.border-transparent  { border-color: transparent; }
.border-gray-100     { border-color: #f3f4f6; }
.border-gray-200     { border-color: #e5e7eb; }
.border-gray-600     { border-color: #4b5563; }
.border-gray-700     { border-color: #374151; }
.border-gray-800     { border-color: #1f2937; }
.border-gray-900     { border-color: #111827; }
.border-green-400    { border-color: #4ade80; }
.border-green-500    { border-color: #22c55e; }
.border-green-600    { border-color: #16a34a; }
.border-blue-400     { border-color: #60a5fa; }
.border-blue-500     { border-color: #3b82f6; }
.border-blue-600     { border-color: #2563eb; }
.border-indigo-500   { border-color: #6366f1; }
.border-purple-400   { border-color: #c084fc; }
.border-purple-500   { border-color: #a855f7; }
.border-yellow-400   { border-color: #facc15; }
/* Con opacidad */
.border-white\/10    { border-color: rgba(255,255,255,0.1); }
.border-white\/20    { border-color: rgba(255,255,255,0.2); }
.border-white\/30    { border-color: rgba(255,255,255,0.3); }
.border-gray-700\/50 { border-color: rgba(55,65,81,0.5); }
.border-green-500\/10{ border-color: rgba(34,197,94,0.1); }
.border-green-500\/20{ border-color: rgba(34,197,94,0.2); }
.border-green-500\/30{ border-color: rgba(34,197,94,0.3); }
.border-green-500\/50{ border-color: rgba(34,197,94,0.5); }
.border-blue-500\/30 { border-color: rgba(59,130,246,0.3); }
.border-blue-500\/50 { border-color: rgba(59,130,246,0.5); }
.border-purple-500\/30{ border-color: rgba(168,85,247,0.3); }

/* ========================
   BORDER RADIUS
   ======================== */
.rounded-none   { border-radius: 0; }
.rounded-sm     { border-radius: 0.125rem; }
.rounded        { border-radius: 0.25rem; }
.rounded-md     { border-radius: 0.375rem; }
.rounded-lg     { border-radius: 0.5rem; }
.rounded-xl     { border-radius: 0.75rem; }
.rounded-2xl    { border-radius: 1rem; }
.rounded-3xl    { border-radius: 1.5rem; }
.rounded-full   { border-radius: 9999px; }
.rounded-\[2rem\]  { border-radius: 2rem; }

/* ========================
   SHADOWS
   ======================== */
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow      { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.shadow-none { box-shadow: none; }
.shadow-green-900\/20 { box-shadow: 0 10px 15px -3px rgba(20,83,45,0.2); }
.shadow-green-900\/30 { box-shadow: 0 10px 25px rgba(20,83,45,0.3); }
.shadow-green-900\/50 { box-shadow: 0 10px 25px rgba(20,83,45,0.5); }
.shadow-blue-900\/20  { box-shadow: 0 10px 15px -3px rgba(30,58,138,0.2); }
.shadow-black\/50     { box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.drop-shadow-lg       { filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.1)); }
.drop-shadow-2xl      { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }
.drop-shadow-\[0_0_15px_rgba\(16\,185\,129\,0\.3\)\] { filter: drop-shadow(0 0 15px rgba(16,185,129,0.3)); }

/* ========================
   OPACITY
   ======================== */
.opacity-0    { opacity: 0; }
.opacity-20   { opacity: 0.2; }
.opacity-30   { opacity: 0.3; }
.opacity-40   { opacity: 0.4; }
.opacity-50   { opacity: 0.5; }
.opacity-60   { opacity: 0.6; }
.opacity-70   { opacity: 0.7; }
.opacity-80   { opacity: 0.8; }
.opacity-90   { opacity: 0.9; }
.opacity-100  { opacity: 1; }
.\!opacity-100 { opacity: 1 !important; }

/* ========================
   OVERFLOW
   ======================== */
.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }
.overflow-scroll   { overflow: scroll; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto   { overflow-y: auto; }

/* ========================
   CURSOR
   ======================== */
.cursor-pointer    { cursor: pointer; }
.cursor-not-allowed{ cursor: not-allowed; }
.cursor-default    { cursor: default; }

/* ========================
   POINTER EVENTS
   ======================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ========================
   TRANSITIONS & ANIMATIONS
   ======================== */
.transition-all      { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors   { transition: color, background-color, border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-opacity  { transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-transform{ transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-shadow   { transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); }

.duration-100  { transition-duration: 100ms; }
.duration-150  { transition-duration: 150ms; }
.duration-200  { transition-duration: 200ms; }
.duration-300  { transition-duration: 300ms; }
.duration-500  { transition-duration: 500ms; }
.duration-700  { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

.ease-linear { transition-timing-function: linear; }
.ease-in     { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out    { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounce-anim {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: translateY(-10px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-spin       { animation: spin 1s linear infinite; }
.animate-ping       { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-pulse      { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-bounce     { animation: bounce-anim 3s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow 20s linear infinite; }

/* Delays */
.delay-75   { animation-delay: 75ms; }
.delay-100  { animation-delay: 100ms; }
.delay-150  { animation-delay: 150ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-500  { animation-delay: 500ms; }
.delay-700  { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ========================
   TRANSFORMS
   ======================== */
.scale-100    { transform: scale(1); }
.scale-105    { transform: scale(1.05); }
.scale-110    { transform: scale(1.1); }
.scale-95     { transform: scale(0.95); }
.rotate-12    { transform: rotate(12deg); }
.-rotate-12   { transform: rotate(-12deg); }
.translate-y-0  { transform: translateY(0); }
.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-5 { transform: translateY(-1.25rem); }
.translate-x-1  { transform: translateX(0.25rem); }
.-translate-x-1\/2 { transform: translateX(-50%); }

/* Transform origin */
.origin-center  { transform-origin: center; }

/* !important overrides */
.\!transform-none { transform: none !important; }
.\!visible        { visibility: visible !important; }

/* ========================
   BACKDROP FILTER
   ======================== */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur    { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-2xl{ backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.backdrop-blur-3xl{ backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); }
.backdrop-blur    { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ========================
   OBJECT FIT
   ======================== */
.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }
.object-fill     { object-fit: fill; }

/* ========================
   ASPECT RATIO
   ======================== */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-auto   { aspect-ratio: auto; }

/* ========================
   SCROLL SNAP
   ======================== */
.snap-x           { scroll-snap-type: x mandatory; }
.snap-mandatory   { scroll-snap-type: x mandatory; }
.snap-center      { scroll-snap-align: center; }
.snap-start       { scroll-snap-align: start; }

/* ========================
   VISIBILITY
   ======================== */
.visible    { visibility: visible; }
.invisible  { visibility: hidden; }

/* ========================
   ISOLATION
   ======================== */
.isolate    { isolation: isolate; }
.isolation-auto { isolation: auto; }

/* ========================
   FILTER
   ======================== */
.filter   { filter: var(--tw-filter, none); }
.blur-sm  { filter: blur(4px); }
.blur     { filter: blur(8px); }
.blur-md  { filter: blur(12px); }
.blur-lg  { filter: blur(16px); }

/* ========================
   OUTLINE
   ======================== */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.outline      { outline-style: solid; }
.ring-0       { box-shadow: none; }

/* ========================
   SPACE BETWEEN (children)
   ======================== */
.space-y-2   > * + * { margin-top: 0.5rem; }
.space-y-4   > * + * { margin-top: 1rem; }
.space-y-6   > * + * { margin-top: 1.5rem; }
.space-y-8   > * + * { margin-top: 2rem; }
.space-y-12  > * + * { margin-top: 3rem; }
.space-y-16  > * + * { margin-top: 4rem; }
.space-x-2   > * + * { margin-left: 0.5rem; }
.space-x-4   > * + * { margin-left: 1rem; }

/* ========================
   RESIZE
   ======================== */
.resize-none { resize: none; }
.resize      { resize: both; }

/* ========================
   MISC LAYOUT
   ======================== */
.container { width: 100%; margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ========================
   GROUP HOVER — Usando :has y data atrib. fallback
   (Compatibilidad amplia con el sistema de grupos de Tailwind)
   ======================== */
/* Las clases group-hover se aplican al hijo cuando el padre recibe hover */
.group:hover .group-hover\:opacity-100   { opacity: 1; }
.group:hover .group-hover\:scale-110     { transform: scale(1.1); }
.group:hover .group-hover\:scale-105     { transform: scale(1.05); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:text-green-400{ color: #4ade80; }
.group:hover .group-hover\:rotate-12     { transform: rotate(12deg); }
.group:hover .group-hover\:-rotate-12    { transform: rotate(-12deg); }
/* group\/btn */
.group\/btn:hover .group-hover\/btn\:text-green-400 { color: #4ade80; }

/* ========================
   HOVER STATES (self)
   ======================== */
.hover\:opacity-100:hover    { opacity: 1; }
.hover\:opacity-80:hover     { opacity: 0.8; }
.hover\:scale-105:hover      { transform: scale(1.05); }
.hover\:scale-110:hover      { transform: scale(1.1); }
.hover\:scale-95:hover       { transform: scale(0.95); }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.hover\:text-white:hover        { color: #fff; }
.hover\:text-green-400:hover    { color: #4ade80; }
.hover\:text-green-500:hover    { color: #22c55e; }
.hover\:text-blue-400:hover     { color: #60a5fa; }
.hover\:border-green-500\/50:hover { border-color: rgba(34,197,94,0.5); }
.hover\:border-blue-500\/50:hover  { border-color: rgba(59,130,246,0.5); }
.hover\:border-yellow-400\/50:hover{ border-color: rgba(250,204,21,0.5); }
.hover\:border-purple-500\/50:hover{ border-color: rgba(168,85,247,0.5); }
.hover\:border-green-400\/50:hover { border-color: rgba(74,222,128,0.5); }
.hover\:border-blue-400\/50:hover  { border-color: rgba(96,165,250,0.5); }
.hover\:border-green-500\/30:hover { border-color: rgba(34,197,94,0.3); }
.hover\:border-blue-500\/30:hover  { border-color: rgba(59,130,246,0.3); }
.hover\:bg-gray-700:hover      { background-color: #374151; }
.hover\:bg-gray-700\/80:hover  { background-color: rgba(55,65,81,0.8); }
.hover\:bg-green-500\/90:hover { background-color: rgba(34,197,94,0.9); }
.hover\:bg-blue-500\/90:hover  { background-color: rgba(59,130,246,0.9); }
.hover\:bg-white\/15:hover     { background-color: rgba(255,255,255,0.15); }
.hover\:bg-white\/20:hover     { background-color: rgba(255,255,255,0.2); }
.hover\:shadow-green-900\/50:hover { box-shadow: 0 10px 25px rgba(20,83,45,0.5); }
.hover\:transition-shadow:hover    { transition: box-shadow 0.3s ease; }

/* ========================
   FOCUS
   ======================== */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus       { box-shadow: 0 0 0 2px rgba(34,197,94,0.5); }
.focus\:border-green-500:focus { border-color: #22c55e; }

/* ========================
   FIRST/LAST CHILD
   ======================== */
.first\:mt-0:first-child { margin-top: 0; }
.last\:mb-0:last-child   { margin-bottom: 0; }

/* ========================
   NTH-CHILD DELAYS
   ======================== */
.nth-child-1 { }

/* ========================
   RESPONSIVE BREAKPOINTS
   ======================== */

/* sm: ≥640px */
@media (min-width: 640px) {
  .sm\:block         { display: block; }
  .sm\:hidden        { display: none; }
  .sm\:flex          { display: flex; }
  .sm\:grid          { display: grid; }
  .sm\:text-left     { text-align: left; }
  .sm\:text-center   { text-align: center; }
  .sm\:text-4xl      { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl      { font-size: 3rem; line-height: 1; }
  .sm\:text-6xl      { font-size: 3.75rem; line-height: 1; }
  .sm\:text-7xl      { font-size: 4.5rem; line-height: 1; }
  .sm\:h-48          { height: 12rem; }
  .sm\:px-6          { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-12         { padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:w-1\/2        { width: 50%; }
  .sm\:w-full        { width: 100%; }
  .sm\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row      { flex-direction: row; }
  .sm\:gap-6         { gap: 1.5rem; }
}

/* md: ≥768px */
@media (min-width: 768px) {
  .md\:block          { display: block; }
  .md\:hidden         { display: none; }
  .md\:flex           { display: flex; }
  .md\:grid           { display: grid; }
  .md\:inline-flex    { display: inline-flex; }
  .md\:w-1\/2         { width: 50%; }
  .md\:w-1\/3         { width: 33.333333%; }
  .md\:w-2\/3         { width: 66.666667%; }
  .md\:w-full         { width: 100%; }
  .md\:w-32           { width: 8rem; }
  .md\:h-32           { height: 8rem; }
  .md\:h-\[60vh\]     { height: 60vh; }
  .md\:h-\[80vh\]     { height: 80vh; }
  .md\:h-\[400px\]    { height: 400px; }
  .md\:h-\[300px\]    { height: 300px; }
  .md\:w-\[80vw\]     { width: 80vw; }
  .md\:w-\[300px\]    { width: 300px; }
  .md\:h-\[300px\]    { height: 300px; }
  .md\:p-4            { padding: 1rem; }
  .md\:p-8            { padding: 2rem; }
  .md\:p-12           { padding: 3rem; }
  .md\:p-16           { padding: 4rem; }
  .md\:px-4           { padding-left: 1rem; padding-right: 1rem; }
  .md\:px-6           { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:px-8           { padding-left: 2rem; padding-right: 2rem; }
  .md\:py-4           { padding-top: 1rem; padding-bottom: 1rem; }
  .md\:py-8           { padding-top: 2rem; padding-bottom: 2rem; }
  .md\:py-12          { padding-top: 3rem; padding-bottom: 3rem; }
  .md\:py-20          { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:px-8           { padding-left: 2rem; padding-right: 2rem; }
  .md\:py-4           { padding-top: 1rem; padding-bottom: 1rem; }
  .md\:mt-0           { margin-top: 0; }
  .md\:mb-0           { margin-bottom: 0; }
  .md\:text-left      { text-align: left; }
  .md\:text-center    { text-align: center; }
  .md\:text-right     { text-align: right; }
  .md\:text-sm        { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:text-base      { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg        { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl        { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-2xl       { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl       { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl       { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl       { font-size: 3rem; line-height: 1; }
  .md\:text-6xl       { font-size: 3.75rem; line-height: 1; }
  .md\:text-7xl       { font-size: 4.5rem; line-height: 1; }
  .md\:text-8xl       { font-size: 6rem; line-height: 1; }
  .md\:text-9xl       { font-size: 8rem; line-height: 1; }
  .md\:text-\[10px\]  { font-size: 10px; }
  .md\:leading-\[10px\] { line-height: 10px; }
  .md\:font-bold      { font-weight: 700; }
  .md\:items-center   { align-items: center; }
  .md\:items-end      { align-items: flex-end; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-end    { justify-content: flex-end; }
  .md\:justify-between{ justify-content: space-between; }
  .md\:flex-row       { flex-direction: row; }
  .md\:flex-col       { flex-direction: column; }
  .md\:gap-4          { gap: 1rem; }
  .md\:gap-6          { gap: 1.5rem; }
  .md\:gap-8          { gap: 2rem; }
  .md\:gap-12         { gap: 3rem; }
  .md\:gap-16         { gap: 4rem; }
  .md\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex-wrap      { flex-wrap: wrap; }
  .md\:top-10         { top: 2.5rem; }
  .md\:right-20       { right: 5rem; }
  .md\:bottom-20      { bottom: 5rem; }
  .md\:left-10        { left: 2.5rem; }
  .md\:left-0         { left: 0; }
  .md\:px-4           { padding-left: 1rem; padding-right: 1rem; }
}

/* lg: ≥1024px */
@media (min-width: 1024px) {
  .lg\:block          { display: block; }
  .lg\:hidden         { display: none; }
  .lg\:flex           { display: flex; }
  .lg\:grid           { display: grid; }
  .lg\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:w-\[60vw\]     { width: 60vw; }
  .lg\:w-1\/2         { width: 50%; }
  .lg\:w-1\/3         { width: 33.333333%; }
  .lg\:text-6xl       { font-size: 3.75rem; line-height: 1; }
  .lg\:text-7xl       { font-size: 4.5rem; line-height: 1; }
  .lg\:text-8xl       { font-size: 6rem; line-height: 1; }
  .lg\:gap-8          { gap: 2rem; }
  .lg\:gap-12         { gap: 3rem; }
  .lg\:py-24          { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:px-8           { padding-left: 2rem; padding-right: 2rem; }
}

/* xl: ≥1280px */
@media (min-width: 1280px) {
  .xl\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:text-7xl       { font-size: 4.5rem; line-height: 1; }
  .xl\:text-8xl       { font-size: 6rem; line-height: 1; }
  .xl\:gap-8          { gap: 2rem; }
}

/* ========================
   HIDDEN md:flex pattern
   ======================== */
@media (max-width: 767px) {
  .hidden.md\:flex    { display: none !important; }
}

/* Mobile show/hide patterns */
.flex.md\:hidden { display: flex; }
@media (min-width: 768px) {
  .flex.md\:hidden { display: none !important; }
}

/* ========================
   MISC TAILWIND EXTRAS
   ======================== */
/* text-\[10px\] in pre */
.text-\[10px\] { font-size: 10px; }
.text-\[6px\]  { font-size: 6px; }

/* Tracking con corchetes */
.tracking-\[0\.3em\]  { letter-spacing: 0.3em; }
.tracking-\[0\.4em\]  { letter-spacing: 0.4em; }

/* ========================
   SHADOW GLOW (custom verde)
   ======================== */
.shadow-\[0_0_50px_rgba\(16\,185\,129\,0\.1\)\] {
  box-shadow: 0 0 50px rgba(16,185,129,0.1);
}
.shadow-\[0_0_30px_rgba\(16\,185\,129\,0\.2\)\] {
  box-shadow: 0 0 30px rgba(16,185,129,0.2);
}
.shadow-\[0_0_15px_rgba\(74\,222\,128\,0\.2\)\] {
  box-shadow: 0 0 15px rgba(74,222,128,0.2);
}

/* ========================
   CLASES FALTANTES — margin/padding fraccionario
   ======================== */
.mt-0\.5   { margin-top: 0.125rem; }
.mb-0\.5   { margin-bottom: 0.125rem; }
.mt-1\.5   { margin-top: 0.375rem; }
.mb-1\.5   { margin-bottom: 0.375rem; }
.pt-0      { padding-top: 0; }
.pb-0      { padding-bottom: 0; }
.px-0      { padding-left: 0; padding-right: 0; }
.py-0      { padding-top: 0; padding-bottom: 0; }
.-mt-7     { margin-top: -1.75rem; }
.-mt-6     { margin-top: -1.5rem; }
.-mt-8     { margin-top: -2rem; }
.-mb-6     { margin-bottom: -1.5rem; }
.-bottom-6 { bottom: -1.5rem; }
.-left-6   { left: -1.5rem; }
.-right-6  { right: -1.5rem; }
.-top-6    { top: -1.5rem; }

/* Tamaños faltantes */
.w-14      { width: 3.5rem; }
.h-14      { height: 3.5rem; }
.w-7       { width: 1.75rem; }
.h-7       { height: 1.75rem; }
.w-3\/4    { width: 75%; }
.h-3\/4    { height: 75%; }
.w-1       { width: 0.25rem; }
.h-1       { height: 0.25rem; }
.h-px      { height: 1px; }

/* Mix blend */
.mix-blend-overlay { mix-blend-mode: overlay; }
.mix-blend-screen  { mix-blend-mode: screen; }
.mix-blend-multiply{ mix-blend-mode: multiply; }

/* Grayscale */
.grayscale  { filter: grayscale(100%); }
.invert     { filter: invert(1); }

/* No underline */
.no-underline { text-decoration: none; }

/* Blur especial */
.blur-\[100px\] { filter: blur(100px); }
.blur-\[50px\]  { filter: blur(50px); }

/* col-span */
.md\:col-span-2 { }
@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}

/* flex-row-reverse */
.flex-row-reverse { flex-direction: row-reverse; }
.md\:flex-row-reverse { }
@media (min-width: 768px) {
  .md\:flex-row-reverse { flex-direction: row-reverse; }
}

/* rounded personalizado */
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }

/* bg verde-glow extra */
.bg-green-900\/80  { background-color: rgba(20,83,45,0.8); }
.bg-emerald-900\/40{ background-color: rgba(6,78,59,0.4); }
.bg-emerald-400    { background-color: #34d399; }
.text-emerald-400  { color: #34d399; }
.border-emerald-500\/30 { border-color: rgba(16,185,129,0.3); }

/* Translate Y */
.-translate-y-1\/2 { transform: translateY(-50%); }

/* ========================
   FIX CRÍTICO: ÍCONOS FEATHER / SVG
   Evita que los SVGs generados por feather.replace()
   se estiren o deformen en contenedores flex
   ======================== */

/* Todos los SVG dentro de etiquetas <i> con data-feather */
[data-feather] {
  display: inline-block;
  flex-shrink: 0;
}

/* SVGs generados por feather.replace() */
svg[stroke] {
  flex-shrink: 0;
  overflow: visible;
}

/* Cuando el ícono está en un flex row con texto (lista de features) */
.flex.items-start > svg,
.flex.items-center > svg,
.inline-flex.items-center > svg,
.flex.gap-2 > svg {
  flex-shrink: 0;
  min-width: 1rem;
  min-height: 1rem;
}

/* Íconos de tamaño w-4 h-4 específicamente en listas */
.w-4.h-4 {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
}

.w-5.h-5 {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
}

.w-6.h-6 {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem;
  min-height: 1.5rem;
  flex-shrink: 0;
}

.w-7.h-7 {
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem;
  min-height: 1.75rem;
  flex-shrink: 0;
}

.w-8.h-8 {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem;
  min-height: 2rem;
  flex-shrink: 0;
}

.w-10.h-10 {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem;
  min-height: 2.5rem;
  flex-shrink: 0;
}

/* Ícono decorativo gigante en esquina — debe contener su tamaño */
.w-32.h-32 {
  width: 8rem !important;
  height: 8rem !important;
  min-width: 8rem;
  min-height: 8rem;
  flex-shrink: 0;
}

/* ========================
   FIX ESPACIADO — about.html y dev.html
   Asegura separación correcta entre secciones
   y que los contenedores de íconos no se expandan
   ======================== */

/* Contenedor de ícono de servicio — cuadrado fijo */
.w-14.h-14.rounded-xl,
.w-16.h-16.rounded-2xl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Items de lista con ícono check — ícono no se estira */
li.flex.items-start {
  align-items: flex-start;
}

li.flex.items-start > svg {
  margin-top: 1px; /* alineación visual con el texto */
  flex-shrink: 0;
}

/* Separación entre secciones en about.html */
section + section {
  /* No margin extra — el padding de cada section es suficiente */
}

/* Fix: imagen de fondo absoluta en secciones — no debe afectar layout */
section > img.absolute {
  pointer-events: none;
  user-select: none;
}

/* Fix: aspect-video en contenedores de imágenes */
.aspect-video img,
.aspect-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix espacio-y-16 en about */
.space-y-16 > * + * {
  margin-top: 4rem;
}

/* ========================
   RESPONSIVE EXTRA
   ======================== */
@media (max-width: 767px) {
  /* Íconos en mobile no deben estirarse en flex */
  .flex.items-start.gap-2 svg,
  .flex.items-center.gap-2 svg {
    flex-shrink: 0;
    align-self: flex-start;
  }

  /* Secciones en about/dev con padding reducido */
  section.py-24 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  section.py-32 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* Grid de 2 columnas cae a 1 columna */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Texto italic — por si falta */
.italic { font-style: italic; }