/* =================================== 01. Fuentes ====================================== */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Delius&display=swap"); /* =================================== 02. Tokens de color y radios (modo claro / oscuro) ====================================== */ :root { /* Tailwind-style tokens en HSL */ --background: 0 0% 100%; --foreground: 224 71.4% 4.1%; --card: 0 0% 100%; --card-foreground: 224 71.4% 4.1%; --popover: 0 0% 100%; --popover-foreground: 224 71.4% 4.1%; --primary: 80 60% 40%; --primary-foreground: 80 60% 98%; --secondary: 62 31% 90%; --secondary-foreground: 62 30% 10%; --muted: 220 14.3% 95.9%; --muted-foreground: 220 8.9% 46.1%; --accent: 33 94% 54%; --accent-foreground: 33 94% 5%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 220 13% 91%; --input: 220 13% 91%; --ring: 80 60% 40%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; /* Tipografías base estilo Ágora */ --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-alt: "Delius", cursive; /* Sombra y transición genéricas */ --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.06); --transition-base: 220ms cubic-bezier(0.37, 0, 0.63, 1); } /* Modo oscuro: aplica añadiendo la clase .dark al o */ .dark { --background: 224 71.4% 4.1%; --foreground: 210 20% 98%; --card: 224 71.4% 4.1%; --card-foreground: 210 20% 98%; --popover: 224 71.4% 4.1%; --popover-foreground: 210 20% 98%; --primary: 80 60% 40%; --primary-foreground: 80 60% 98%; --secondary: 62 31% 15%; --secondary-foreground: 62 30% 95%; --muted: 215 27.9% 16.9%; --muted-foreground: 215 25% 65.1%; --accent: 33 94% 54%; --accent-foreground: 33 94% 5%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; --border: 215 27.9% 16.9%; --input: 215 27.9% 16.9%; --ring: 80 60% 40%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } /* =================================== 03. Reset básico y estructura general ====================================== */ *, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); } html { font-size: 16px; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: hsl(var(--foreground)); background-color: hsl(var(--background)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: hsl(var(--foreground)); text-decoration: none; transition: color var(--transition-base), opacity var(--transition-base); } a:hover { color: hsl(var(--accent)); } ul, ol { padding: 0; margin: 0; list-style: none; } button, input, textarea, select { font: inherit; } /* =================================== 04. Utilidades de color (equivalentes a Tailwind) ====================================== */ /* Fondo */ .bg-background { background-color: hsl(var(--background)); } .bg-card { background-color: hsl(var(--card)); } .bg-popover { background-color: hsl(var(--popover)); } .bg-primary { background-color: hsl(var(--primary)); } .bg-secondary { background-color: hsl(var(--secondary)); } .bg-muted { background-color: hsl(var(--muted)); } .bg-accent { background-color: hsl(var(--accent)); } .bg-destructive { background-color: hsl(var(--destructive)); } /* Texto */ .text-foreground { color: hsl(var(--foreground)); } .text-card-foreground { color: hsl(var(--card-foreground)); } .text-popover-foreground { color: hsl(var(--popover-foreground)); } .text-primary-foreground { color: hsl(var(--primary-foreground)); } .text-secondary-foreground { color: hsl(var(--secondary-foreground)); } .text-muted-foreground { color: hsl(var(--muted-foreground)); } .text-accent-foreground { color: hsl(var(--accent-foreground)); } .text-destructive-foreground { color: hsl(var(--destructive-foreground)); } /* Borde */ .border { border: 1px solid hsl(var(--border)); } .border-input { border: 1px solid hsl(var(--input)); } /* Radio */ .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: calc(var(--radius) * 1.5); } .rounded-full { border-radius: 9999px; } /* Sombra */ .shadow-soft { box-shadow: var(--shadow-soft); } /* Espaciados rápidos */ .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .px-4 { padding-inline: 1rem; } .py-4 { padding-block: 1rem; } .mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; } .my-6 { margin-block: 1.5rem; } /* Layout tipo “container” */ .container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 1.5rem; } .section { padding-block: 80px; } /* =================================== 05. Tipografía ====================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; font-weight: 700; color: hsl(var(--foreground)); letter-spacing: -0.03em; } h1 { font-size: 2.75rem; line-height: 1.1; } h2 { font-size: 2.25rem; line-height: 1.15; } h3 { font-size: 1.9rem; line-height: 1.2; } h4 { font-size: 1.6rem; line-height: 1.25; } h5 { font-size: 1.35rem; line-height: 1.3; } h6 { font-size: 1.1rem; line-height: 1.3; } p { margin: 0 0 1rem; } .text-center { text-align: center; } .text-justify { text-align: justify; } .font-alt { font-family: var(--font-alt); } /* =================================== 06. Componentes básicos (card, botones, badges) ====================================== */ /* Card genérica */ .card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: var(--radius); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-soft); padding: 1.5rem; } .card-header { margin-bottom: 1rem; font-weight: 600; } .card-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.3rem; border-radius: var(--radius); border: 1px solid transparent; font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--secondary)); } .btn-secondary:hover { filter: brightness(1.02); box-shadow: var(--shadow-soft); } .btn-outline { background-color: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .btn-outline:hover { background-color: hsl(var(--muted)); } .btn-destructive { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); } .btn-destructive:hover { filter: brightness(1.05); } /* Badges */ .badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; border: 1px solid transparent; } .badge-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } /* =================================== 07. Formularios ====================================== */ .input, textarea, select { width: 100%; padding: 0.65rem 0.9rem; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background-color: hsl(var(--background)); color: hsl(var(--foreground)); transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } .input:focus, textarea:focus, select:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); } /* Placeholder */ .input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); } /* Estados */ .input-error { border-color: hsl(var(--destructive)); } /* =================================== 08. Header / Nav simple (opcional) ====================================== */ .site-header { position: sticky; top: 0; z-index: 20; background-color: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); backdrop-filter: blur(10px); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; } .site-logo { display: flex; align-items: center; gap: 0.6rem; } .site-logo img { height: 48px; width: auto; } .site-nav { display: flex; align-items: center; gap: 1.2rem; font-size: 0.95rem; } /* =================================== 09. Helpers de alineación / grid ====================================== */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: 1rem; } .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Responsive sencillo */ @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .site-header-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }