/* ========================================================================== ZENTRIX V3 — Sistema de diseño "BLOQUES" -------------------------------------------------------------------------- Concepto: la página se construye apilando bloques full-bleed que alternan entre noche (morado profundo), papel (crema cálido) y color plano saturado. Sobre ellos van piezas "chunky": bordes gruesos, sombras SÓLIDAS (sin difuminar) y tipografía display muy grande. Diferencias deliberadas frente a la V2 (que era lavanda suave, bordes de 1px y sombras difusas): · sombras sólidas desplazadas en lugar de blur · bordes de 3px en color tinta en lugar de 1px lavanda · fondo crema cálido en lugar de lavanda frío · escala tipográfica mucho mayor · ilustraciones SVG propias en lugar de emojis REGLA INNEGOCIABLE: toda capa decorativa (::before, ::after, overlays, formas de fondo) lleva `pointer-events: none`. En la V2 la falta de esto bloqueó clics reales de enlaces. ========================================================================== */ :root { /* ---- Noche: base de los bloques oscuros ---- */ --night: #1B0B3B; --night-2: #2C1364; --night-3: #3B1C82; --ink: #14082F; /* bordes y sombras sólidas */ /* ---- Papel: base de los bloques claros ---- */ --paper: #FFFBF2; /* crema cálido */ --paper-2: #F6EFFF; --surface: #FFFFFF; /* ---- Color de marca y acentos ---- */ --brand: #6C63FF; --brand-deep: #4B3FD6; --pink: #EC4899; --teal: #0BB8A0; --orange: #F97316; --sun: #FFC93C; /* acento de energía, para franjas y detalles */ /* ---- Paleta por curso (identidad ya establecida) ---- */ --c-ia: #6C63FF; --c-cc: #EC4899; --c-cd: #0BB8A0; --c-dt: #F97316; /* ---- Texto ---- */ --on-dark: #FFFFFF; --on-dark-muted: rgba(255, 255, 255, 0.74); --on-paper: #1B0B3B; --on-paper-muted: #5C5473; /* ---- Formas ---- */ --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --bw: 3px; /* grosor de borde estándar */ /* ---- Sombras SÓLIDAS (la firma de la V3) ---- */ --sh: 6px 6px 0 var(--ink); --sh-lg: 10px 10px 0 var(--ink); --sh-sm: 4px 4px 0 var(--ink); --sh-light: 6px 6px 0 rgba(20, 8, 47, 0.16); --maxw: 1200px; --header-h: 78px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); } /* ========================================================================== RESET ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Va en , nunca en : overflow no-visible en body rompe el position:sticky del header. */ overflow-x: hidden; } body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } body { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; background: var(--paper); color: var(--on-paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; } :focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; border-radius: 6px; } /* ========================================================================== SISTEMA DE BLOQUES ========================================================================== */ .block { position: relative; padding: clamp(64px, 9vw, 120px) 0; } .block__inner { position: relative; z-index: 2; /* siempre por encima de las formas decorativas */ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Variantes de fondo */ .block--night { background: var(--night); color: var(--on-dark); } .block--night-2 { background: var(--night-2); color: var(--on-dark); } .block--paper { background: var(--paper); color: var(--on-paper); } .block--white { background: var(--surface); color: var(--on-paper); } .block--brand { background: var(--brand); color: var(--on-dark); } .block--sun { background: var(--sun); color: var(--ink); } .block--night h1, .block--night h2, .block--night h3, .block--night h4, .block--night-2 h1, .block--night-2 h2, .block--night-2 h3, .block--night-2 h4, .block--brand h1, .block--brand h2, .block--brand h3, .block--brand h4 { color: var(--on-dark); } /* "Lift": el bloque se monta sobre el anterior con esquinas superiores redondeadas. Es lo que crea la transición curva entre franjas. */ .block--lift { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: clamp(-56px, -5vw, -40px); /* compensa el solape para que el contenido no suba con el bloque */ padding-top: calc(clamp(64px, 9vw, 120px) + 48px); z-index: 1; } /* Formas decorativas de fondo — SIEMPRE inertes al puntero */ .block__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; /* innegociable */ z-index: 0; } .block__deco > * { position: absolute; pointer-events: none; } /* En pantallas estrechas no hay margen lateral libre: las formas acabarían solapando el titular. Al ser decorativas, se retiran. */ @media (max-width: 760px) { .block__deco { display: none; } } .shape { pointer-events: none; } /* Dimensionado de los SVG del sprite. Los