RESPUESTA DE REFERENCIA · FORMULARIO DEL SYSTEM DESIGN DE INTERBANK
Es lo que esperamos que salga del prompt, hecho a partir de los mismos archivos (Codigo_home_interbank.txt y Estilos_interbank.txt). Úsalo para comparar o si te trabaste.

==================================================
CAMPO 1 · COMPANY NAME AND BLURB
==================================================
Interbank (Banco Internacional del Perú)

Interbank es uno de los principales bancos del Perú. Su lema es «El tiempo vale más que el dinero» y en su página se presenta así: «Bienvenido a Interbank. Te acompañamos a alcanzar tus sueños con productos y soluciones financieras como Tarjetas, Préstamos, Créditos y más.» Su promesa es ahorrarle tiempo al cliente: operaciones más fáciles y simples, desde el celular y sin ir a una agencia.

Atiende a tres segmentos: Personas, Negocios y Empresas e Instituciones. La página de inicio está pensada para Personas y tiene dos llamados fijos en la parte superior: «ABRE TU CUENTA» y «BANCA POR INTERNET».

Familias de productos:
- Tarjetas de crédito (Interbank Benefit, Tarjeta con Garantía, Extracash, Incremento de Línea, Compra de Deuda, Divídelo, Pago Automático, Disposición de Efectivo, portal viajero) y de débito (Débito Digital, Débito Benefit, Débito Clásica).
- Cuentas: Cuenta Simple 100% Digital, Cuenta Millonaria, Cuenta Súper Tasa, Depósito a Plazo, Cuenta Sueldo, Cuenta Joven, Cuenta Ahorro Techo, Cuenta Ahorro Casa, Cuenta CTS, Cuenta Corriente y Cuenta Euros.
- Préstamos y créditos: Préstamo Personal, Adelanto de Sueldo, Préstamo con garantía líquida, Préstamo Cuenta Sueldo, Préstamo para estudios, Crédito por convenio y para Trabajadores Públicos.
- Crédito hipotecario: Tradicional, MiVivienda, Techo Propio y Préstamo con Garantía Hipotecaria, con una Zona Hipotecaria, calculadoras y un Portal Inmobiliario.
- Seguros: de tarjetas (360º, Pagos Digitales, Premium), protección de créditos, desgravamen, Vive Salud +, Oncológico, Vehicular, SOAT, Viajes, Negocio Protegido y Retiro Protegido.
- Envío y recepción de dinero: transferencias en el Perú y al exterior, remesas y retiro de fondos de PayPal.
- Inversión y combos: Fondos Mutuos, Bolsa, Fondo de Jubilación, Combo Clásico y Combo Fácil.

Canales digitales: Interbank APP, Banca por Internet, Plin (pagos entre personas, en POS, transporte y eCommerce), WhatsApp AVI, Erni para invertir en fondos mutuos de forma digital, Alcancía Virtual, Cuponera Visa Premia, Shopstar (tienda online), Puntaje Crediticio y Aprendemás.

Campañas destacadas en la página: «Nueva funcionalidad Modo Calle» (tus cuentas invisibles y más seguras cuando sales a la calle), «Nueva Interbank APP», «¡Gana 1 año de viajes gratis!» y «Hasta 20% de dscto. en Shopstar.pe».

Personalidad de la marca: cercana, práctica y optimista. Tutea al cliente, le habla de sus metas y de su tiempo, y le propone acciones concretas y rápidas. Busca transmitir modernidad digital, simpleza y confianza, sin el tono distante de la banca tradicional.

==================================================
CAMPO 2 · FONTS, LOGOS AND ASSETS
==================================================
- Subir: logo_interbank.png. Logo horizontal: símbolo cuadrado azul y la palabra «Interbank» en verde.
- Fuentes de la marca: Geometria (light, regular y medium) para títulos, menú y botones, y Montserrat (regular y bold) para textos. Si Marca o TI te dan los archivos .woff2, súbelos aquí. Si no, no subas nada: Design usará equivalentes, y en el campo 3 queda escrito cuál es cada una.
- Dejar vacíos: GitHub, código de tu computadora y archivo .fig.

==================================================
CAMPO 3 · ANY OTHER NOTES
==================================================
1. COLORES
Primarios
- Verde Interbank #05BE50: color principal de la marca. Botón principal verde, enlaces, íconos de expandir del menú, botón flotante de ayuda y estados activos. Hover #37CB73. Deshabilitado #69D890 (en enlaces) o fondo #ECEDED (en botones).
- Azul institucional #0039A6: barra superior de segmentos, botón principal azul, títulos y acentos. Hover #3361B8.
Secundarios y de apoyo
- Azul claro #64B4E6: botón y enlace sobre fondos oscuros. Hover #83C3EB.
- Rojo #EB0046: botón de error o alerta. Hover #EF336B. Rosa #F36690 en el indicador de carga del botón rojo. Rosa claro #FBCCDA: fondo de los mensajes de error.
- Ámbar #F0AA00 y naranja #F99100: fondos de aviso y destacados.
- Verdes claros #CDF2DC y #EEFAF2: fondos de éxito y destacados suaves; #CDF2DC también en el aro del indicador de carga.
- Celeste claro #E0F0FA: fondo de los mensajes informativos. #A2D2F0 y #CCD7ED: fondos y acentos azules suaves.
- Degradé celeste #00A0E6 → #59E1FF: solo en fondos especiales puntuales.
Neutros y texto
- Texto principal #0F191E (casi negro). Etiquetas y texto secundario #878C8F. Íconos de listas y texto de botón deshabilitado #B7BABC.
- Texto sobre verde, azul o rojo: blanco #FFFFFF.
Fondos y bordes
- Fondo de página y de menús #FBFBFB. Tarjetas y encabezado #FFFFFF. Secciones alternas y botones deshabilitados #ECEDED.
- Bordes y divisores #D9DADB (campos, tarjetas) y #ECEDED (filas de tablas y menú).

2. TIPOGRAFÍA
- Geometria (sans-serif geométrica): títulos, hero, menú, botones y cifras. Pesos 300, 400 y 500.
- Montserrat (respaldo Arial, sans-serif): cuerpo de texto, formularios, enlaces y tablas. Pesos 400, 600 y 700.
- Base del body: Montserrat 14px, color #0F191E.
- Escala de tamaños: 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 36, 40, 44, 48, 52 y 60px. Los más usados son 14, 16, 12 y 24px.
- Interlineados más usados: 20, 24, 16, 14 y 18px. En títulos grandes, 1.2 veces el tamaño (52px con 62.4px; 32px con 38.4px).
- Letter-spacing negativo en títulos: -0.4px a 24px, -0.5px a 20px, -1px a 32px y -3px a 52px. Botones con +0.1px.
- Títulos h1 a h5 en peso normal (400): la jerarquía se marca con tamaño, no con negrita. 600 para destacar y 700 solo para cifras o énfasis puntual.
- Mayúsculas en los llamados a la acción principales: «ABRE TU CUENTA», «DESCUBRIR», «SOLICÍTALO».

3. BOTONES
- Base: inline-flex centrado, Geometria 500, letter-spacing 0.1px, padding horizontal 32px, radio 4px, sin borde. Transición del fondo de 0.1s ease-out.
- Tamaños: pequeño, 40px de alto con texto de 12px; grande, 48px de alto con texto de 14px; versión ajustada con padding de 18px y texto de 12px.
- Principal verde: fondo #05BE50, texto blanco. Hover #37CB73. Activo #05BE50.
- Principal azul: fondo #0039A6, texto blanco. Hover #3361B8.
- Principal celeste: fondo #64B4E6. Hover #83C3EB.
- Principal rojo: fondo #EB0046. Hover #EF336B.
- Principal blanco (sobre fondos de color): fondo blanco, texto #05BE50.
- Secundario verde: fondo transparente, borde 2px #05BE50, texto #05BE50. Hover: borde y texto #37CB73.
- Secundario blanco: borde blanco; en hover, el borde pasa a rgba(255,255,255,0.8).
- Deshabilitado: principal con fondo #ECEDED y texto #B7BABC (blanco al 20% sobre fondos oscuros); secundario con texto #D9DADB.
- Cargando: círculo de 22px con borde de 2px girando cada 500ms; aro en verde claro #69D890 y #CDF2DC, con un tramo blanco.
- Pueden llevar ícono a la izquierda (candado, WhatsApp) de 16 a 24px con 4px de separación.

4. OTROS COMPONENTES
- Barra superior de segmentos (Personas, Negocios, Empresas e Instituciones): fondo azul #0039A6, 32px de alto (38px en la versión con scroll horizontal), texto blanco.
- Encabezado principal: fondo blanco, 48px de alto (60px en escritorio), fijo arriba (sticky) y con sombra 0 2px 4px rgba(236,237,237,0.5).
- Submenús: fondo #FBFBFB, cada ítem de 52px de alto con divisor de 1px #ECEDED, peso 500. Ícono «+» de expandir en verde #05BE50. Los títulos de tercer nivel van en 20px, peso 600 y letter-spacing -0.5px.
- Buscador: campo de 64px de alto, texto de 14px #0F191E, padding de 24px por 16px, ícono de lupa de 24px y sombra interior inset 2px 2px 4px rgba(236,237,237,0.5).
- Campos de formulario: fondo blanco, borde #D9DADB, radio 4px y sombra interior suave.
- Tarjetas y cajas: fondo blanco, radio 4px (8px en tablas de información), borde 1px #ECEDED o #D9DADB y sombra 12px 20px 60px 0 rgba(15,24,51,0.07).
- Desplegables: sombra 0 2px 8px rgba(51,51,51,0.12) o 0 2px 12px 2px rgba(51,51,51,0.12).
- Enlaces: Montserrat 600 en verde #05BE50, sin subrayado. Hover #37CB73, deshabilitado #69D890. Sobre fondos oscuros, celeste #64B4E6 con hover #83C3EB.
- Hero y banners: carrusel con 4 diapositivas, título grande en Geometria (24px en móvil, hasta 52px en escritorio), bajada de 16 a 32px, un botón y flechas Back/Next con puntos de paginación.
- Botón flotante de ayuda: círculo verde #05BE50 de 48px (64px en escritorio) con radio 24px, fijo abajo a la derecha a 24px del borde, con ícono blanco.
- Tablas de información: filas separadas por 1px #ECEDED y versión con borde y radio de 8px.

5. ICONOGRAFÍA
- Fuente propia de íconos «icons» (clases ibk-icon-*: tarjeta, check, flecha, reloj, cerrar, expandir, teléfono, búsqueda, WhatsApp) e íconos SVG en línea.
- Lineales y de un solo color: heredan el color del texto o van en verde #05BE50 o blanco sobre fondos de color.
- Tamaños de 16, 20 y 24px. En botones, de 16 a 24px.

6. LAYOUT Y ESPACIADO
- Contenedor centrado con ancho máximo de 1272px. Márgenes laterales de 16px en móvil y 6.67% en pantallas medianas.
- Breakpoints: 48em (768px), 64em (1024px) y 80em (1280px), diseñando desde móvil hacia arriba.
- Espaciados más usados: 4, 8, 12, 16, 20, 24, 32 y 40px.

7. RADIOS, SOMBRAS, BORDES Y TRANSICIONES
- Radios: 4px por defecto (botones, campos, tarjetas); 6 y 8px en cajas y tablas; 20 y 24px en píldoras y en el botón flotante; 50% en círculos.
- Sombras: tarjeta 12px 20px 60px 0 rgba(15,24,51,0.07); encabezado 0 2px 4px 0 rgba(236,237,237,0.5); desplegables 0 2px 8px rgba(51,51,51,0.12); barra inferior 0 -2px 8px 0 rgba(51,51,51,0.2). Siempre suaves y difusas.
- Bordes de 1px (#D9DADB o #ECEDED); 2px solo en botones secundarios.
- Transiciones: opacidad 250ms ease-in-out, fondos de botón 0.1s ease-out y acordeones con max-height de 0.25s linear.

8. COMPOSICIÓN
- Mucho espacio en blanco y fondo claro (#FBFBFB o blanco); una idea por bloque.
- Cada bloque sigue el mismo orden: título corto, una línea de bajada y un solo botón de acción.
- El verde es el color de acción y el azul el de institución. No compiten en un mismo bloque: uno manda y el otro acompaña.
- Las fotos y banners muestran personas y situaciones cotidianas, con el texto a un lado y aire alrededor.

9. TONO DE VOZ
- Tutea siempre, es cercano, positivo y directo. Frases cortas que invitan a actuar.
- Titulares reales: «Nueva Interbank APP», «Tus operaciones más fáciles y simples.», «¡Gana 1 año de viajes gratis!», «Un préstamo para lo que necesites», «¡Tus ahorros crecen cada vez más!», «La tarjeta de crédito que espera por ti».
- Botones reales: «ABRE TU CUENTA», «DESCUBRIR», «SOLICÍTALO», «SOLICÍTALO AQUÍ», «HAZLO AQUÍ», «CONOCE MÁS», «ENTÉRATE AQUÍ», «Ábrela ahora», «Conócela aquí», «Actualízala hoy».
- Verbos en imperativo y en segunda persona (abre, solicita, descubre, conoce). Los avisos legales van al final y en corto: «Aplican TyC.».

10. QUÉ NO HACER NUNCA
- No usar colores fuera de esta paleta ni colores de la competencia.
- No usar sombras duras ni efectos 3D. Gradientes solo en los casos que ya existen: el desvanecido del azul en los bordes de la barra superior y el degradé celeste #00A0E6 → #59E1FF en fondos especiales.
- No usar negrita en todos los títulos: la jerarquía va por tamaño.
- No poner verde y azul como fondo en un mismo bloque, ni más de un botón principal por bloque.
- No usar radios grandes en tarjetas o botones normales: 4px por defecto.
- No deformar, recolorear ni poner el logo sobre fondos que le quiten contraste.
- No tratar de usted al cliente ni usar textos largos en los botones.
