/* ========================================================= Neura Cloud — base.css Tokens de diseño, reset, tipografía y utilidades comunes ========================================================= */ :root { /* Color — primario del sistema: #008791. Esta landing usaba #2794AB, un teal más claro y más azul que el del portal, y además tintaba los grises de teal (#12272e, #47626c). El conjunto se leía como otro producto. Aquí se alinean con lo que usa la aplicación: su teal de marca y la escala `gray` de Tailwind. Para recuperar el gris frío de antes basta con devolver --ink, --ink-soft, --ink-faint, --paper y --line a los valores comentados; nada más depende de ellos. OJO: el logo (favicon.png) es #31728f, que no coincide con ninguno de los dos teales. Queda pendiente decidir cuál manda. */ --ink: #1f2937; /* antes #12272e */ --ink-soft: #6b7280; /* antes #47626c */ --ink-faint: #9ca3af; /* antes #7f959d */ --paper: #f9fafb; /* antes #f7fafb */ --surface: #ffffff; --line: #e5e7eb; /* antes #e2eaed */ --brand: #008791; --brand-deep: #007a83; --brand-tint: #e6f3f4; /* Aclarados del teal para los bloques oscuros. Estaban repetidos a mano (#7fc4d4, #bfe9f1) en tres archivos; como token se cambian una sola vez. */ --brand-soft: #73bdc2; --brand-pale: #b2dbde; --clay: #c0703c; --clay-tint: #f9efe6; /* Superficie de las secciones destacadas (calculadora, informe, cierre y la tarjeta de IA). Antes eran bloques casi negros sobre página blanca; el contraste llamaba mucho la atención pero no aportaba jerarquía, solo peso, y es el recurso más repetido en las plantillas generadas. Ahora esas mismas secciones se separan con un tono muy claro sesgado hacia el teal de marca: el ritmo entre secciones se mantiene, la lectura no se interrumpe y el acento sigue siendo el único elemento saturado de la página. Los nombres describen el PAPEL y no el color: cuando se llamaban --dark y --on-dark, cambiar el valor obligaba a que el nombre mintiera. */ --panel: #f1f7f8; --panel-raised: #ffffff; --on-panel: #17323a; --on-panel-muted: #5b7780; --on-panel-line: #d8e6e9; /* Tipografía Outfit es la del portal: la aplica el preflight de Tailwind sobre . La landing usaba Montserrat, y era lo que más delataba que parecían dos productos distintos. Instrument Serif se conserva a propósito: son tres usos editoriales (el énfasis en , los números de paso y la cita de "Nosotros") que le dan voz propia a la página comercial, algo que la interfaz no necesita. Además empareja mejor con Outfit que con Montserrat. */ --font-display: "Outfit", system-ui, sans-serif; --font-body: "Outfit", system-ui, -apple-system, sans-serif; --font-accent: "Instrument Serif", Georgia, serif; /* Forma y elevación */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(13, 42, 51, 0.06); --shadow-md: 0 12px 32px -14px rgba(13, 42, 51, 0.18); --shadow-lg: 0 28px 64px -28px rgba(13, 42, 51, 0.3); --header-h: 76px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background-color: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } ::selection { background: var(--brand-tint); color: var(--brand-deep); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout ---------- */ .container { width: min(1140px, 100% - 48px); margin-inline: auto; } /* Medida corta para bloques de lectura seguida (FAQ, textos largos). */ .container--narrow { width: min(760px, 100% - 48px); } section { scroll-margin-top: calc(var(--header-h) + 16px); } .section { padding-block: 96px; } .section--alt { background: var(--surface); border-block: 1px solid var(--line); } /* ---------- Tipografía ---------- */ h1, h2, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); } h1 { font-size: clamp(2.25rem, 4.6vw, 3.3rem); } h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); } h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .lead { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.7; } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; } /* Énfasis con segunda tipografía: Instrument Serif itálica + color acento */ em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--clay); } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head--center { margin-inline: auto; text-align: center; } /* Cabecera partida: titular a la izquierda, texto de apoyo a la derecha y alineado a la línea base del titular. Rompe el eje central que repetían todas las secciones, que era lo que hacía que la página se leyera como plantilla. Se usa con moderación: si se aplica a todas, deja de romper nada. */ .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px 64px; align-items: end; text-align: left; } .section-head--split .eyebrow, .section-head--split h2 { grid-column: 1; } .section-head--split h2 { margin-bottom: 0; } .section-head--split p:not(.eyebrow) { grid-column: 2; grid-row: 2; margin-top: 0; padding-bottom: 6px; border-left: 2px solid var(--line); padding-left: 20px; } @media (max-width: 820px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } .section-head--split .eyebrow, .section-head--split h2, .section-head--split p:not(.eyebrow) { grid-column: 1; grid-row: auto; } .section-head--split p:not(.eyebrow) { border-left: none; padding-left: 0; margin-top: 16px; } } .section-head p:not(.eyebrow) { margin-top: 16px; font-size: 1.06rem; color: var(--ink-soft); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .btn-lg { padding: 15px 28px; font-size: 1rem; } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-deep); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); } .btn-light { background: var(--surface); color: var(--ink); } .btn-light:hover { background: var(--brand-tint); transform: translateY(-1px); } .btn-note { font-weight: 400; color: var(--ink-faint); font-size: 0.85em; } /* ---------- Revelado al hacer scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: 0.12s; } [data-reveal-delay="2"] { transition-delay: 0.24s; } [data-reveal-delay="3"] { transition-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } .btn, .btn:hover { transform: none; } }